CSS :host-context的用法

在 CSS 中，:host-context() 伪类是用来匹配 Shadow DOM 根元素的，与 :host() 伪类的区别在于，:host-context() 伪类可以借助 Shadow DOM 根元素的上下文元素（也就是父元素）来匹配。

以正方形图像的圆角控制为例，我们可以借助 <square-img> 元素所在的父元素来控制，HTML 代码如下：

<p>
   <square-img src="./1.jpg" alt="直角头像"></square-img>
</p>
<p class="cs-radius">
   <square-img src="./1.jpg" alt="圆角头像"></square-img>
</p>

下面 <square-img> 元素的圆角效果是通过父元素 .cs-radius 控制的，相关 CSS 代码如下：

:host-context(.cs-radius) { border-radius: 50%; overflow: hidden;

此时的渲染效果如下图所示。


:host-context() 伪类目前仅由 Chrome 浏览器和 Android 设备支持，因此建议在实验性项目中使用。

同样，:host-context() 伪类只能在 Shadow DOM 内部使用，在外部使用是没有效果的。