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>

列印頁面