Question

HTML5 Rocks有great article创建自定义元素，还有an article样式化。

要注册我可以执行的自定义元素：

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype)
});

我现在可以在我的身体中使用x-foo。

<body>
    <x-foo>Hello</x-foo>
</body>

现在我的问题是：如何在CSS中设置<x-foo />元素（在正文中）？我想保持我的HTML干净，所以我不想附加任何类或ID。

这篇文章让我觉得它应该是：

:host(x-foo) { 
    color: red;
}

Answer 1

你应该在HTML中使用ID和类，它根本不会让你的代码变得混乱。但这应该做你要求的。

body x-foo{
  color: red;
}

我建议在<x-foo>标记中添加ID或类，如<x-foo id="myID"></x-foo>

#myID{
  color:red;
}

Answer 2

阅读完文章后我发现了这个：

CSS

<style> 
  app-panel { 
    display : flex ; 
  } 
  [ is = "x-item" ]  { 
    transition : opacity 400ms ease-in-out ; 
    opacity :  0.3 ; 
    flex :  1 ; 
    text-align : center ; 
    border-radius :  50% ; 
  } 
  [ is = "x-item" ]: hover { 
    opacity :  1.0 ; 
    background :  rgb ( 255 ,  0 ,  255 ); 
    color : white ; 
  } 
  app-panel >  [ is = "x-item" ]  { 
    padding :  5px ; 
    list-style : none ; 
    margin :  0  7px ; 
  } 
</style>

HTML

    <app-panel> 
      <li  is = "x-item"> Do </ li> 
      <li  is = "x-item"> Re </ li> 
      <li  is = "x-item"> Mi </ li> 
    </ app-panel>

Answer 3

在您的身体（html代码）中，您可以添加 id 或类，无论它是不重要的服装元素还是默认元素。< / p>
您可以在css中使用标记名称（此处为：x-foo）。

Answer 4

您可以像其他基本css一样轻松完成此操作，例如

<style>
  x-foo{
    font-size:45px;
    .........
  }
</style>

如何直接从CSS设置自定义元素的样式？

4 个答案: