Javascript 自定义HTML标记和CSS

我正在使用一个自定义HTML标记

，它封装了一些CSS样式和一些

div

s来形成Windows 8加载微调器：

它使用ShadowDOM（如图所示）从客户端隐藏

div

s，并允许它们仅使用一个标记来获取复杂元素（无需额外的JS、CSS或HTML）。我希望能够在元素上使用CSS，以可控的方式更改某些样式/特性<例如，代码>背景色会改变圆圈的背景（

div

s），增加宽度也会增加圆圈的大小。这可能吗

---

编辑：我忘了提到大多数CSS样式（如图中所示的

background

）无论如何都不起作用。这里有一个指向微调器的链接：

我建议给元素一个类：

<spin-loader class="foo">

或者尝试将标记重命名为没有特殊字符的内容：

<spinloader>

我相信您将无法针对css中具有特殊字符的标记。

解释 您的

spin loader

标记的大小为零，因为它的根

div

子级没有可以为其指定大小的子级记住，您为所有

div

s设置了

位置：绝对属性

因此，您所看到的是飞行
div
s，它们位于
spin loader
标记之外。试试看

<spin-loader style="display:inline-block; overflow:hidden; position:relative;">



你会明白我的意思


解决方案
下面是如何正确设计它们的样式



旋转加载器{
显示：内联块；
位置：相对；/*避免标签外的div*/
宽度：100px；高度：100px；
边框：5px纯红；
边缘：1米；
}
旋转加载器：：阴影div div{
背景：蓝色；/*假设我只想要蓝色*/
}
var proto=Object.create（HTMLElement.prototype）；
proto.createdCallback=函数（）{
var shadow=this.createShadowRoot（）；
shadow.innerHTML=“div div{background:red；动画：旋转5s无限立方体贝塞尔（0.05,0.50,0.94,0.50），隐藏5s无限；变换原点：0px-15px；宽度：5px；高度：5px；边界半径：100%；位置：绝对；左侧：50%；顶部：50%；不透明度：0；边距顶部：20px；}@keyframe旋转{0%，20%{变换：旋转（0deg）}50%{变换：旋转（360度）；}80%，100%{变换：旋转（720度）；}}@关键帧隐藏{0%，19%{不透明度：0；}20%，80%{不透明度：1；}81%，100%{不透明度：0；}”；
};
var SpinLoader=document.registerement（'spin-loader'，{prototype:proto}）；
为什么不给它一个class@dcdaz我想让用户在不影响基本设计的情况下完全自由地更改设计的各个方面谢谢，如果我想操纵
背景：黄色
？例如，将其设置为使圆圈变黄？@user3088260我刚刚制作了圆圈蓝色！是的，我知道怎么做，但是如果我想
改变圆圈的颜色而不是背景，该怎么办？@user3088260老实说，我不知道。规范没有告诉任何东西，例如，允许这样做的自定义css属性。我找到了解决背景问题的方法（
background:inherit
on the circles）但尚未成功解决操作问题HTML5规范对自定义标记命名有严格的指导原则，标记必须有破折号，以便易于与本机标记区分
spinloader {
    width: 100%;
}

<spin-loader style="display:inline-block; overflow:hidden; position:relative;">