CSS - 伪类 :host

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>

打印本页