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 <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 <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 :/
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 <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>