CSS 伪类

:host () CSS 伪类函数允许您从其影子 DOM 内部选择自定义元素，但前提是作为函数参数给出的选择器（例如类选择器）与影子主机匹配。

: host() 伪类函数在影子 DOM 外部使用时无效。

语法

:host(<compound-selector>) {
   /* ... */
}

选择影子主机，但前提是它与选择器参数匹配。

:host(.special-custom-element) {
   /* ... */
}

CSS :host-function 示例

以下示例演示如何使用 :host() 伪类函数选择自定义元素的影子宿主。本例中的自定义元素是上下文跨度元素 -

<html>
<head>
<style>
   div {
      font-size: 25px;
   }
</style>
</head>
<body>
   <div>
      <p>Yxjc123.com CSS - <a href="#"><context-span class="custom-host">:host()</context-span></a></p>
   </div>
   <script>
      class HostStyle extends HTMLElement {
         constructor() {
            super();
            const shadowRoot = this.attachShadow({ mode: 'open' });
            const styleElement = document.createElement('style');
            styleElement.textContent = `
               :host(.custom-host) {
                  color: blue;
                  background: pink;
               }`;/*applies the styling to custom element if it matches the class selector .custom-host*/
            shadowRoot.appendChild(styleElement);

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

            shadowRoot.appendChild(spanElement);
         }
      }
      customElements.define('context-span', HostStyle);
   </script>
</body>
</html>