Web组件中如何为插槽内的元素应用::selection选中样式

问题根因 #

样式不生效是两个规范层面的硬限制导致的：

1. 你写的::slotted(::selection)是完全无效的选择器。Web组件的CSS规则明确要求，::slotted()括号内只能放简单元素选择器，用来匹配直接插入插槽的DOM节点，不支持嵌套伪类、伪元素；遇到这种语法错误的规则，浏览器会直接丢弃，根本不会尝试应用样式。
2. Shadow DOM有严格的样式隔离边界。插槽引入的DOM节点本身属于宿主文档的DOM树，不在组件的Shadow Root作用域范围内，Shadow内部写的选择器，哪怕是::slotted()，也没法直接给这些节点的内部伪元素（比如::selection）加样式——::slotted()最多只能给slotted元素本身设置基础样式，完全够不到元素的选中状态这类伪元素。

你观察到裸文本CONTENT1的样式生效，只是因为Shadow Root里写的无作用域限定的::selection规则，意外匹配到了直接插在插槽里的裸文本渲染区域；而被<div>包起来的CONTENT2是独立元素节点，它的选中状态的样式上下文属于宿主文档，Shadow内部的规则穿不透隔离边界，所以样式完全不生效。

可行实现方案 #

想要在组件内部统一给所有插槽内容加选中样式，不用依赖外部文档写规则，可以直接定位Shadow Root里的<slot>元素，给它设置::selection样式：

/* 删掉原来的无效::slotted(::selection)规则，替换成下面的写法 */
slot::selection {
    background: red;
    color: white;
}

这种写法能生效的原因是，<slot>本身就是Shadow DOM里的实际渲染占位节点，所有分配到插槽的内容，不管是裸文本还是独立元素节点，渲染时都会作为slot的内容参与布局，应用在slot上的::selection样式，会自动覆盖slot范围内所有内容的选中效果，根本不需要穿透Shadow DOM的样式边界。

如果需要让组件使用者可以自定义选中样式，可以搭配CSS自定义属性做能力开放，在Shadow Root里定义默认值：

:host {
    /* 对外暴露可配置的样式变量，使用者可以在外部文档覆盖这些值 */
    --widget-slotted-selection-bg: red;
    --widget-slotted-selection-color: white;
}

slot::selection {
    background: var(--widget-slotted-selection-bg);
    color: var(--widget-slotted-selection-color);
}

这种写法既保留了组件自带的默认选中样式逻辑，也给使用者留出了自定义空间，不需要使用者手动针对组件写额外的全局选择器。

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