- From: Sam Richard <notifications@github.com>
- Date: Tue, 08 Jan 2019 15:15:52 -0800
- To: w3c/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/webcomponents/issues/781@github.com>
I'm working on a set of custom elements where I would like to have standard set of light DOM elements and classes enclosing the shadow DOM of the custom element I'm creating; think master slides for a slide deck. I'd like to have the following HTML: **User-written HTML** ```html <my-slide><p>My awesome slide content<p></my-slide> ``` **Expanded custom element** ```html <my-slide class="slide"> <div class="slide--container"> #shadow-root <slot>…<p></slot> </div> </my-slide> ``` I've tried two ways to get this to work: * Adding the inner Light DOM container and adding the parent attribute in `constructor()` (which fails because manipulation like that isn't allowed) * Doing the manipulation during `connectedCallback`, which puts everything in place correctly _except_ any slots I include are never slotted and stay as their original Light DOM * Various attempts at nesting custom elements which all result in the Light DOM I want being covered by the Shadow DOM The reason for needing this mixture of Light DOM and Shadow DOM is, during distribution, I want users to be able to style the `slide` and `slide--container` class with regular CSS and without needing to manipulate the components, but also want the inside of the Shadow DOM to be controlled via the component. Is there any way to accomplish this? -- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/w3c/webcomponents/issues/781
Received on Tuesday, 8 January 2019 23:16:13 UTC