CSS 伪类

CSS :host-context() 伪类选择器允许您根据其祖先元素的类或属性，根据 DOM 中的使用位置，对自定义元素进行不同的样式设置。

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

语法

:host-context(<compound-selector>) {
   /* ... */
}
Firebox 和 Safari 浏览器不支持 :host-context()。

CSS :host-context 示例

以下示例演示如何使用 :host-context() 伪类根据 DOM 中的上下文对自定义元素进行不同的样式设置

 <html>
<head>
<style>
   div {
         background-color: yellow;
   }
</style>
</head>
<body>
   <div>
      <h3>www.yxjc123.com CSS - <a href="#"><context-span>:host-context()</context-span></a></h3>
      <p>CSS <context-span>:host-context()</context-span> 伪类选择器允许您根据自定义元素在 DOM 中的使用位置、基于类或属性来对自定义元素进行不同的样式设置。 它的祖先元素。</p>
   </div>
      <script>
         class HostContext extends HTMLElement {
            constructor() {
               super();
               const shadowRoot = this.attachShadow({ mode: 'open' });
               const styleElement = document.createElement('style');
               styleElement.textContent = `
                  :host-context(div) {
                        color: blue;
                        background-color: violet;
                        border: 3px solid red;
                  }
                  :host-context(div)::after {
                        content: ":host-context()";
                  }`;
               shadowRoot.appendChild(styleElement);
            }
         }
      customElements.define('context-span', HostContext);
   </script>
</body>
</html>