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

How to style a custom element directly from CSS?

本文关键字：元素 样式 自定义 设置 何直接 CSS      更新时间：2023-09-26

HTML5 Rocks有一篇关于创建自定义元素的好文章，还有一篇关于设置它们样式的文章。

要注册自定义元素，我可以执行以下操作：

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;
}

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

body x-foo{
  color: red;
}

我建议在<x-foo>标签中添加一个 id 或类，如下所示<x-foo id="myID"></x-foo> 

#myID{
  color:red;
}

看完这篇文章后，我发现这个：

.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>

  1. 在你的身体（html代码）中，你可以添加一个id或类，无论是不重要的服装元素还是默认元素。

  2. 您可以在 css 中使用标签名称（此处：x-foo）。

您可以像其他基本 css 一样轻松地执行此操作，例如

<style>
  x-foo{
    font-size:45px;
    .........
  }
</style>
相关文章：