原生Web Components自定义滚动条问题：Shadow DOM内样式不生效

你遇到的核心问题是Shadow DOM的样式隔离机制导致外部通过::part设置的滚动条伪类样式无法生效——::part只能选中Shadow DOM内的目标元素本身，无法穿透到它的::-webkit-scrollbar这类伪类/伪元素上，而滚动条的webkit伪类样式必须直接作用在元素所在的Shadow DOM内部样式表中。

具体修复步骤 #

1. 将滚动条样式移到Shadow DOM内部
   在你的Web Component代码中，把滚动条混合宏的样式直接写在Shadow DOM的内部样式里，作用到panel元素上（而不是外部通过::part调用）。

   示例代码（假设你用Sass编写组件内部样式）：

   // Shadow DOM内部样式
   @mixin scrollbar() {
       max-height: var(--scrollbar--max-height, 100%);
       overflow-y: auto;
       overflow-x: hidden;
   
       &::-webkit-scrollbar {
           width: var(--scrollbar-size);
           height: var(--scrollbar-size);
       }
   
       &::-webkit-scrollbar-thumb {
           border-radius: var(--scrollbar-border-radius);
           background-color: var(--scrollbar-foreground-color);
       }
   
       &::-webkit-scrollbar-track {
           background: var(--scrollbar-background-color);
       }
   }
   
   // 给Shadow内的panel元素应用混合宏
   .panel {
       @include scrollbar();
   }
   

   对应的组件模板（Shadow DOM内）：

   <div class="panel" part="panel">
       <!-- 滚动内容 -->
   </div>
   

2. 通过CSS变量实现外部自定义
   利用CSS变量可以穿透Shadow DOM的特性（前提是Shadow Root为open状态），外部可以通过设置组件的自定义属性来控制滚动条样式：

   <!-- 外部样式 -->
   your-web-component {
       --scrollbar-size: 8px;
       --scrollbar-border-radius: 4px;
       --scrollbar-foreground-color: #666;
       --scrollbar-background-color: #eee;
       --scrollbar--max-height: 400px;
   }
   

关键说明 #

• WebKit滚动条伪类属于浏览器原生控件样式，必须在元素所在的Shadow DOM内部样式表中定义，外部样式（包括::part）无法影响到这些伪类。
• 如果你的组件使用了closed类型的Shadow Root，CSS变量无法穿透，此时需要通过组件的属性API来接收样式配置，再动态注入到Shadow内部样式中。

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