首页 > 编程笔记
CSS :host-context的用法
在 CSS 中,:host-context() 伪类是用来匹配 Shadow DOM 根元素的,与 :host() 伪类的区别在于,:host-context() 伪类可以借助 Shadow DOM 根元素的上下文元素(也就是父元素)来匹配。
以正方形图像的圆角控制为例,我们可以借助 <square-img> 元素所在的父元素来控制,HTML 代码如下:
![](/uploads/allimg/240618/2-24061P95U9242.gif)
图 1 :host-context()伪类通过父元素控制组件显示为圆角
:host-context() 伪类目前仅由 Chrome 浏览器和 Android 设备支持,因此建议在实验性项目中使用。
同样,: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;此时的渲染效果如下图所示。
![](/uploads/allimg/240618/2-24061P95U9242.gif)
图 1 :host-context()伪类通过父元素控制组件显示为圆角
:host-context() 伪类目前仅由 Chrome 浏览器和 Android 设备支持,因此建议在实验性项目中使用。
同样,:host-context() 伪类只能在 Shadow DOM 内部使用,在外部使用是没有效果的。