组件中伪元素与伪类样式问题：Shadow DOM下:host::-webkit-scrollbar-thumb:hover失效解决方案咨询

我完全懂你在Electron（Chrome内核）应用里用Shadow DOM组件时碰到的这个头疼问题：单独写:host::-webkit-scrollbar-thumb或者:host(:hover)都能正常生效，但把它们组合成:host::-webkit-scrollbar-thumb:hover就完全没效果，而且用全局ID选择器的变通写法又会破坏样式封装性，在复杂组件应用里确实很不友好。

正确的写法 #

你需要调整伪类与滚动条选择器的组合顺序，把宿主的hover状态放在前面，正确的写法是：

:host(:hover)::-webkit-scrollbar-thumb {
  background: black;
}

为什么原来的写法不行？ #

这是WebKit内核对于Shadow DOM伪类和滚动条伪元素的组合规则导致的：滚动条的::-webkit-scrollbar-thumb是宿主元素的伪元素，它的hover状态需要通过宿主元素被hover这个条件来触发，而不是直接给thumb伪元素加hover。原来的:host::-webkit-scrollbar-thumb:hover写法，浏览器无法正确识别Shadow DOM宿主上下文里的这个组合选择器。

修正后的完整代码 #

把你代码里的CSS部分替换成下面的内容即可：

:host {
  position: absolute;
  overflow: auto;
  left: 20px;
  top: 20px;
  width: 200px;
  height: 50px;
}
:host::-webkit-scrollbar {
  width: 10px;
  background-color: rgb(36, 106, 153);
}
:host::-webkit-scrollbar-track {
  background-color: rgb(36, 106, 153);
  border-radius: 4px;
}
:host::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(253, 253, 134), rgb(165, 224, 243));
  border-radius: 4px;
  border: solid 1px rgb(6, 115, 193);
}
/* 修正后的hover样式 */
:host(:hover)::-webkit-scrollbar-thumb {
  background: black;
}

这样修改后，既能完美保留Shadow DOM的样式封装性，又能实现滚动条thumb在宿主hover时变黑的效果，完全适配你的Electron应用场景。

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