Selecting scrollbar of slotted elements in autonomous custom element

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>

I want to make the scrollbar invisible, but couldn't find a way to select it (inspect the above with Dev Tools, you'll see the scrollbar styles are not applied). How do I select the scrollbar of slotted elements in Autonomous Custom Elements? It works well when the element is a direct child of the shadow root,

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>

but apparently not with slotted elements :/

score 1 · Accepted Answer · answered Dec 07 '21 at 17:20

Slotted content is styled by its container element (thus in your case the main DOM)

For a very long read see: ::slotted CSS selector for nested children in shadowDOM slot

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

1 Answers1