Web Component中JS内联添加自定义滚动条的代码位置咨询

要给x-modal组件内的.modal类添加自定义滚动条样式，你需要把CSS注入到组件的Shadow DOM内部，具体实现如下：

修改后的代码 #

// js/common/overlay/modal.js
import { animate as animate5, timeline as timeline2 } from "vendor";
var Modal = class extends DialogElement {
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute("aria-modal", "true");
    
    // 新增：注入自定义滚动条样式到Shadow DOM
    const scrollbarStyle = `
      .modal::-webkit-scrollbar {
        background-color: #fff;
        width: 16px;
        overflow: auto;
      }
      .modal::-webkit-scrollbar-track {
        background-color: #fff;
      }
      .modal::-webkit-scrollbar-thumb {
        background-color: #babac0;
        border-radius: 16px;
        border: 4px solid #fff;
      }
      .modal::-webkit-scrollbar-button {
        display: none;
      }
    `;
    const styleEl = document.createElement('style');
    styleEl.textContent = scrollbarStyle;
    this.shadowRoot.appendChild(styleEl);
  }
  get shadowDomTemplate() {
    return this.getAttribute("template") || "modal-default-template";
  }
  get shouldLock() {
    return true;
  }
  get shouldAppendToBody() {
    return true;
  }
  createEnterAnimationControls() {
    if (matchesMediaQuery("sm")) {
      return animate5(this, { opacity: [0, 1] }, { duration: 0.2 });
    } else {
      return timeline2([
        [this.getShadowPartByName("overlay"), { opacity: [0, 1] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1] }],
        [this.getShadowPartByName("content"), { transform: ["translateY(100%)", "translateY(0)"] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1], at: "<" }]
      ]);
    }
  }
  createLeaveAnimationControls() {
    if (matchesMediaQuery("sm")) {
      return animate5(this, { opacity: [1, 0] }, { duration: 0.2 });
    } else {
      return timeline2([
        [this.getShadowPartByName("overlay"), { opacity: [1, 0] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1] }],
        [this.getShadowPartByName("content"), { transform: ["translateY(0)", "translateY(100%)"] }, { duration: 0.3, easing: [0.645, 0.045, 0.355, 1], at: "<" }]
      ]);
    }
  }
};

if (!window.customElements.get("x-modal")) {
  window.customElements.define("x-modal", Modal);
}

关键说明 #

• Shadow DOM存在样式隔离机制，外部CSS无法直接影响内部元素，::-webkit-scrollbar这类伪元素也无法穿透边界，因此必须将样式直接注入到Shadow DOM内部。
• 选择在connectedCallback中添加样式，确保组件挂载到DOM时样式已同步生效。
• 如果你使用的DialogElement基类是通过shadowDomTemplate加载模板，也可以直接把滚动条CSS添加到对应的模板文件中，效果一致。

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