Web_Components系列（九）-影子宿主的CSS选择器
时间：2023-03-27 22:39:42
HTML
前言在上一节中，我们学习了如何为自定义组件设置样式。当时自定义标签的样式是在主DOM中设置的：虽然达到了样式设置的目的，但是有一个缺点：自定义标签的样式是硬编码的，不够灵活。如果能在自定义组件内部控制自定义标签的样式，会相对灵活一些，也算是实现了“封装、相互隔离”的组件原则。今天我们就来学习如何在自定义组件内部实现自定义标签的样式控制。在正文开始之前，我们先来回顾一下ShadowDOM的整体结构：ShadowDOM的CSS选择器今天的重点是了解与ShadowDOM相关的几个选择器。:host伪类选择器选择内部使用这部分CSS的Shadow宿主元素，其实就是一个自定义标签元素。用法如下：:host{display:block;边距：20px；宽度：200px；高度：200px；border:3pxsolid#000;}注意：:host选择器仅在ShadowDOM中使用时有效。例如：另外，您可以使用:host子选择器的形式为ShadowHost的子元素设置样式，例如：:host伪类选择器的兼容性如下：:host()伪类函数:host()是获取给定选择器的ShadowHost。如下面的代码：:host(.my-card)只会选择class名为my-card的自定义元素，也可以跟子选择器选择自己和节点下的子元素。注意：:host()参数必须传递，否则选择器函数无效，例如：:host()伪类函数的兼容性如下：选择器作为参数传入。如下代码：
:host-context(#container)只会对id为容器元素的自定义元素生效，效果如下如下：注意：这里的参数也是必填项，否则整个selector函数将无法实现其兼容性如下：:host和:host()共存的必要性看了上面的介绍，很多人可能会有这样的疑问：:host(.my-card){}不可以直接用:host.my-card{}代替吗？答案是不！！！，因为::host.my-card本质上是要找到.my-card（Shadowroot）的:host（ShadowHost），而ShadowDOM的结构已经是矛盾的了。总结以上就是ShadowHost的CSS选择器内容。总结一下：:host范围最大，匹配所有自定义元素实例；:host()只选择包含特定选择器的自定义元素；:host-context()选择具有特定选择器父级的自定义元素。~~本文到此结束，感谢阅读！~学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者王隐，我的公众号是《编程三昧》，欢迎关注，希望大家多多指教！
