如何在自定义元素内部为其滚动条设置样式？

核心原因 #

直接在Shadow DOM里写::-webkit-scrollbar无效，是因为滚动条属于自定义元素的宿主（:host）本身，而非Shadow DOM内部的元素。WebKit滚动条伪元素必须绑定到产生滚动条的宿主元素上才能生效。

正确写法 #

在Shadow DOM的<style>中，给所有滚动条伪元素加上:host前缀，明确指定样式作用于自定义元素宿主的滚动条：

customElements.define(
  'my-element',
  class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode: 'open'})
        .innerHTML = `
        <style>
            :host {
                display: block;
                overflow: scroll;
                width: 50vw;
                height: 50vh;
                border: 4px solid green;
            }
            /* 绑定到宿主的滚动条样式 */
            :host::-webkit-scrollbar {
                block-size: 1rem;
            }
            :host::-webkit-scrollbar-track {
                background-color: black;
            }
            :host::-webkit-scrollbar-thumb {
                background-color: red;
            }
        </style>
        <slot></slot>`
    }
  }
)

代码说明 #

1. 把原来Light DOM中my-element的基础样式（宽高、边框）移到:host选择器里，实现样式完全内聚在Shadow DOM中。
2. 通过:host前缀绑定滚动条伪元素，直接针对自定义元素宿主的滚动条设置样式。
3. 外部CSS仅需保留<p>的样式（如果业务需要），自定义元素的样式已完全封装在Shadow DOM内部。

效果验证 #

修改后，滚动条会正确应用黑色轨道、红色滑块的样式，且所有样式都封装在自定义元素内部，不会污染外部样式环境。

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