能否将:focus-within伪选择器链式应用于:host伪类？

可以直接将:focus-within链式连接到:host伪类上，这种写法完全符合CSS规范。

• :host是Shadow DOM专属伪类，用于选中自定义元素本身；:focus-within用于选中包含任意聚焦元素的容器元素。两者链式组合后，:host:focus-within的作用是：当自定义元素内部的任何元素获得焦点时，给自定义元素本身应用样式。

示例代码：

/* 当自定义元素内部有元素聚焦时，给元素本身添加蓝色边框 */
:host:focus-within {
  outline: none;
  border: 2px solid #007bff;
}

这种伪类链式组合的逻辑和普通伪类（比如:hover:focus）一致，只要伪类的语义不冲突，就可以合法组合使用。

内容的提问来源于stack exchange，提问作者David Min