CSS 伪类选择器 :host 主要用于从组件的影子 DOM 中设置主机元素或 Web 组件的容器的样式。Web 组件是使用 HTML、JavaScript 或 CSS 定义和构建的自定义元素。这些组件是可重复使用的。
当使用伪类 :host 来设置样式时，它针对托管 Web 组件的元素，这与针对阴影 DOM 本身内的元素不同。这有助于在 Web 组件中封装样式，并防止它们泄漏到其他元素或受到外部样式的影响。
在影子 DOM 之外使用时， :host 伪类不起作用。
语法
:host {
/* ... */
}
CSS :host 示例
下面是一个 ：host pseudo-class 的例子，其中使用 JavaScript 定义了一个自定义元素，并使用 ：host pseudo-class 来设置它的样式：
<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;}
`;
}
}
// Define the new element
customElements.define('sample-span', SampleSpan);
</script>
</body>
</html>
