` 的背景色。
那如果你想让组件自己的根元素有一个样式，该怎么做呢？可以用 ，`:host` 选择器，。`:host` 指的就是组件自己那个最外层标签。你可以直接写 `:host { display: block; }`，这就给组件的根元素加上了块级显示。甚至还能结合类名来用，比如 `:host(.active)`，意思是只有当这个组件自身带有 `active` 这个 class 时，样式才会生效。
在影子 DOM 内部，标准的 ，CSS 级联和特异性规则，依然有效，也就是说，你仍然可以用更具体的选择器去覆盖前面的样式。但是要注意，LWC 里，不支持 ID 选择器，。如果你在组件里写 `#my-id`，它在运行时会被转换成一个唯一的随机值，所以用 ID 选择器的样式其实是不会生效的。
接下来要讲一个比较反直觉的点——，样式属性的继承，。有一部分 CSS 属性，比如，颜色、字体，，它们是可继承的。这些属性会强势地穿透影子 DOM 边界，从父组件传到子组件。但像，边框，这种不可继承的属性，就不会穿透。所以你会发现，父组件设个 `color: red`，子组件里的文字也变红了，但父组件设的 `border` 就不会跑进子组件。
还有一种东西，叫 ，CSS 自定义属性，，也就是我们常说的 CSS 变量。自定义属性有一个特点：，它总是能穿透影子 DOM，。无论你在父组件里定义了什么 CSS 变量，子组件都能读取到，这是有意设计用于跨组件样式定制的安全方式。
最后，有两个选择器是，不支持，的：一个是 `::host-context()`，另一个是 `::part`。这两个在 LWC 里暂时还用不了，所以写样式时别去依赖它们。
还有一个重要的提醒：影子 DOM 带来的 CSS 隔离会增加一些页面渲染的开销，因为浏览器要管理这些独立的样式作用域。所以我们在设计组件样式的时候要小心，避免过度使用复杂的样式，以减少性能影响。
好了，这就是关于 LWC 中影子 DOM 封装的要点。记住：组件样式是私有的，`:host` 控制根元素，继承穿透有规律，自定义属性随便穿，ID 选择器别用，性能方面多留心。下一个话题我们继续深入。