CSS 伪类 - :host()

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

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

语法

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

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

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

CSS :host-function 示例

以下示例演示了如何使用:host() 伪类函数来选择自定义元素的阴影宿主。此处的自定义元素是context-span 元素 -

<html>
<head>
<style>
   div {
      font-size: 25px;
   }
</style>
</head>
<body>
   <div>
      <p>Tutorialspoint 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>

打印页面