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>Quiero hacer que la barra de desplazamiento sea invisible, pero no pude encontrar una manera de seleccionarla (inspeccione lo anterior con Dev Tools, verá que los estilos de la barra de desplazamiento no se aplican). ¿Cómo selecciono la barra de desplazamiento de elementos ranurados en Elementos personalizados autónomos? Funciona bien cuando el elemento es un hijo directo de la raíz de la sombra,
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>pero aparentemente no con elementos ranurados:/
El contenido ranurado está diseñado por su elemento contenedor (por lo tanto, en su caso, el DOM principal)
Para una lectura muy larga, consulte: ::selector de CSS ranurado para niños anidados en la ranura shadowDOM
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>