如何为含Shadow DOM的x-modal组件应用自定义滚动条样式？

你的判断没错，滚动条样式不生效的核心原因是滚动容器不在<x-modal>元素本身，而是它Shadow DOM内部的part="content"元素，原CSS错误地将滚动条样式绑定到了外部的.modal元素上。

正确的CSS写法 #

直接通过::part定位到Shadow DOM内的滚动容器，再结合webkit滚动条伪元素：

/* WebKit浏览器（Chrome、Safari等） */
.modal::part(content)::-webkit-scrollbar {
  background-color: #fff;
  width: 16px;
}
.modal::part(content)::-webkit-scrollbar-track {
  background-color: #fff;
}
.modal::part(content)::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: 4px solid #fff;
}
.modal::part(content)::-webkit-scrollbar-button {
  display: none;
}

/* 兼容Firefox */
.modal::part(content) {
  scrollbar-width: thin;
  scrollbar-color: #babac0 #fff;
}

关键说明 #

1. 滚动容器是Shadow DOM中设置了overflow: auto的<div part="content">，必须通过::part(content)才能从外部CSS定位到它
2. WebKit滚动条伪元素需要直接关联到滚动容器，所以要写成::part(content)::-webkit-scrollbar的嵌套形式
3. 补充Firefox专属的scrollbar-width和scrollbar-color属性，可以覆盖更多浏览器场景

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