- From: Yuriy Kravets <notifications@github.com>
- Date: Mon, 24 Dec 2018 06:05:23 -0800
- To: w3c/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/webcomponents/issues/778/449738093@github.com>
I've came across same issues as described in the first post. I am using Svelte to generate custom elements, so the syntax is quite different, but the workaround would be applicable for vanilla JS as well: The HTML part: ``` <div class="box"> <div class="list-holder" ref:listHolder> <slot ref:navslot name="navslot"> </slot> <NavigationSlot ref:innernavslot> </NavigationSlot> </div> </div> ``` The JS part: ``` const slot = this.shadowRoot.querySelector("slot"); this.refs.navslot.addEventListener("slotchange", e => { let node = slot.assignedNodes()[0]; if (node) { this.links.forEach(link => { const cloned = node.cloneNode(true); cloned.href = link.href; cloned.text = link.text; this.refs.innernavslot.appendChild(cloned); }); this.refs.listHolder.removeChild(slot); } }); ``` The HTML for `NavigationSlot`: ``` <div class="box"> <slot name="navslot"></slot> </div> ``` The user would use it as follows: ``` <navigation-wc ref:nav> <link-wc text="text" href="https://google.com" slot="navslot"> </link-wc> </navigation-wc> ``` Although this seems to work, I am kind of unsure about such way of dealing with multiple slots. Seems too 'hacky' for me. Plus, I am also unsure whether Edge would implement it the same way other browsers did (Chrome, Safari and Firefox seem to work the same way with those cloned slots). I would like to have the ability to handle arbitrary slotted elements and just apply some styles to them. While for simple use-cases this would work (eg. either using components which I've prepared, for example `link-wc` or by just using standard `<a>` element), but for more complex examples this becomes really cumbersome. For example, something like Angular's `routerLink` directive, or even a fully separate `<Route>` element in case of React. Is support for dynamic slots planned ? For v2 maybe ? -- 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/778#issuecomment-449738093
Received on Monday, 24 December 2018 14:05:45 UTC