在自治自定义元素中选择开槽元素的滚动条

Question

customElements.define("dummy-elem", class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).appendChild(document.getElementById("dummy").content.cloneNode(true));
  }
})

<template id="dummy">
  <style>
    .info-box { width: 40vw; height: 25vh; overflow: hidden; }
    ::slotted(div)                    { overflow-y: scroll; height: 100%; }
    ::slotted(div::-webkit-scrollbar) { width: 0; } /* This is ignored */
  </style>
  
  <div class="info-box">
    <slot name="desc"></slot>
  </div>
</template>

<dummy-elem>
  <div slot="desc">Inside the &lt;custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.</div>
</dummy-elem>

我想让滚动条不可见，但找不到 select 它的方法（使用开发工具检查上面的内容，您会看到滚动条样式未应用）。如何 select Autonomous Custom Elements 中开槽元素的滚动条？当元素是影子根的直接子元素时效果很好，

customElements.define("dummy-elem", class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }).appendChild(document.getElementById("dummy").content.cloneNode(true));
  }
})

<template id="dummy">
  <style>
    .info-box { width: 40vw; height: 25vh; overflow: hidden; }
    .info-box > div { overflow-y: scroll; height: 100%; }
    .info-box > div::-webkit-scrollbar { width: 0; }
  </style>
  
  <div class="info-box">
    <div>
      <slot name="desc"></slot>
    </div>
  </div>
</template>

<dummy-elem>
  <div slot="desc">Inside the &lt;custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.</div>
</dummy-elem>

但显然不是开槽元素：/

Answer 1

开槽内容由其 container 元素设置样式（因此在您的情况下主要 DOM）

要阅读很长的内容，请参阅：

customElements.define("dummy-elem", class extends HTMLElement {
  constructor() {
    super()
      .attachShadow({mode: "open"})
      .append(document.getElementById("dummy").content.cloneNode(true))
  }
})

<template id="dummy">
  <style>
    .info-box { width: 40vw; height: 25vh; overflow: hidden; }
    ::slotted(div)                    { overflow-y: scroll; height: 100%; }
    ::slotted(div::-webkit-scrollbar) { width: 0; } /* This is ignored */
  </style>
  
  <div class="info-box">
    <slot name="desc"></slot>
  </div>
</template>

<style>
  [slot="desc"]::-webkit-scrollbar { /* global CSS styles slotted content */
    width: 0;
  }
</style>

<dummy-elem>
  <div slot="desc">Inside the &lt;custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the
    custom element itself) as a parameter.</div>
</dummy-elem>

在自治自定义元素中选择开槽元素的滚动条

Selecting scrollbar of slotted elements in autonomous custom element

html

javascript

css

scrollbar

web-component