Web_Components 系列（九）—— Shadow Host 的 CSS 选择器

前言

在上一节我们了解了如何给自定义组件设置样式，当时是将自定义标签的样式设置在主 DOM 中的：

<style>
    my-card {
     
     
        display: block;
        margin: 20px;
        width: 200px;
        height: 200px;
        border: 3px solid #000;
    }
</style>
<my-card></my-card>

虽然实现了样式设置的目的，但是却存在一个弊端：自定义标签的样式被写死了，不够灵活。

如果能够在自定义组件内部控制自定义标签的样式，那样的话会相对灵活，而且也算是实现了”封装、相互隔离“的组件原则。今天，我们就来学习一下如何在自定义组件内部实现自定义标签的样式控制。

在正文开始之前，我们再复习一下 Shadow DOM 的整体结构：

Shadow DOM 的 CSS 选择器

今天的重点是认识与 Shadow DOM 相关的几个选择器。

:host 伪类选择器

选取内部使用该部分 CSS 的 Shadow host 元素，其实也就是自定义标签元素。用法如下：

:host {
   
   
    display: block;
    margin: 20px;
    width: 200px;
    height: 200px;
    border: 3px solid #000;
}

注意：:host 选择器只在 Shadow DOM 中使用才有效果。

比如：

另外，可以使用 :host 子选择器 的形式来