自主自定义元素中如何选中插槽(slotted)元素的滚动条并设置隐藏

::slotted 伪类存在语法限制：仅支持匹配插槽的直接顶层元素本身，不支持在选择器后追加后代选择器、伪元素选择器。你写的 ::slotted(div::-webkit-scrollbar) 属于不符合规范的无效规则，会被浏览器直接忽略。

方案1：封装滚动容器到Shadow DOM内部（最推荐，符合组件封装原则） #

不要让插槽传入的元素承担滚动能力，将滚动逻辑放在Shadow DOM的内部元素上，插槽仅用于承载内容，该方案不需要外部使用者做额外配置，滚动逻辑完全封装在组件内部，兼容性最好：

<template id="dummy">
  <style>
    .info-box { width: 40vw; height: 25vh; overflow: hidden; }
    /* 滚动容器写在shadow内部，滚动条样式可以正常生效 */
    .scroll-container { 
      overflow-y: scroll; 
      height: 100%; 
      scrollbar-width: none; /* 兼容火狐 */
      -ms-overflow-style: none; /* 兼容IE/旧版Edge */
    }
    .scroll-container::-webkit-scrollbar { 
      width: 0; /* 兼容Chrome/Safari/新版Edge */
    }
  </style>
  
  <div class="info-box">
    <div class="scroll-container">
      <slot name="desc"></slot>
    </div>
  </div>
</template>

<dummy-elem>
  <!-- 插槽内仅放内容，不需要处理滚动逻辑 -->
  <div slot="desc">你的内容...</div>
</dummy-elem>

方案2：全局定义滚动条隐藏类，插槽元素直接复用 #

如果确实需要插槽传入的元素自身支持滚动，可以在全局样式中定义通用的滚动条隐藏类，传入插槽的元素添加该类即可：

/* 全局样式 */
.scroll-hidden {
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-hidden::-webkit-scrollbar {
  width: 0;
}

使用时直接给插槽元素加类：

<dummy-elem>
  <div slot="desc" class="scroll-hidden">你的内容...</div>
</dummy-elem>

方案3：自定义元素内部动态给插槽元素注入样式 #

如果不想依赖全局样式，也可以在自定义元素的生命周期中，拿到插槽分配的元素后动态注入样式规则：

customElements.define("dummy-elem", class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).appendChild(document.getElementById("dummy").content.cloneNode(true));
  }
  connectedCallback() {
    // 拿到插槽元素
    const descSlot = this.shadowRoot.querySelector('slot[name="desc"]');
    // 监听插槽内容变化
    descSlot.addEventListener('slotchange', () => {
      // 拿到所有分配到该插槽的元素
      const slottedElements = descSlot.assignedElements();
      slottedElements.forEach(elem => {
        // 给插槽元素注入专属样式
        const scrollStyle = document.createElement('style');
        scrollStyle.textContent = `
          :host {
            scrollbar-width: none;
            -ms-overflow-style: none;
          }
          ::-webkit-scrollbar {
            width: 0;
          }
        `;
        elem.appendChild(scrollStyle);
      });
    })
  }
})

内容的提问来源于stack exchange，提问作者Book Of Flames