CSS 伪类

CSS 伪类 :host 主要用于从组件的影子 DOM 中设置主机元素或 Web 组件容器的样式。 Web 组件是使用 HTML、JavaScript 或 CSS 定义和构建的自定义元素。这些组件是可重用的。

当伪类 :host 用于设置样式时，它的目标是托管 Web 组件的元素，而不是针对影子 DOM 本身内的元素。这有助于将样式封装在 Web 组件中，并防止样式泄漏到其他元素或受到外部样式的影响。

:host 伪类没有效果在影子 DOM 外部使用时。

语法

:host {
   /* ... */ 
}

CSS :host 示例

这里是 :host 伪类的示例，其中自定义元素已使用 JavaScript 定义，并使用 :host 伪类对其进行样式设置:

<html>
<head>
<style>
   li {
      padding: 3px;
   }
   body {
      font-size: 1em;
      background-color: peachpuff;
   }

</style>
</head>
<body>
    <h1><sample-span>:host</sample-span> pseudo-class</h1>
    <ul>See the list:
    <li><sample-span>Web component - Custom element</sample-span></li>
    <li><sample-span>Host element</sample-span></li>
    <li><sample-span>HTML, JS, CSS</sample-span></li>
    </ul>
   <script>
   class SampleSpan extends HTMLElement {
    constructor() {
    super();

    const style = document.createElement('style');
    const span = document.createElement('span');
    span.textContent = this.textContent;

    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.appendChild(style);
    shadowRoot.appendChild(span);

    style.textContent = `
       :host { background-color: yellow; padding: 2px 5px; color: blue; }
       :host { border: 2px solid red;}
    `;
 }
 }

    //定义新元素
    customElements.define('sample-span', SampleSpan);
   </script>
</body>
</html>