Re: [w3c/webcomponents] Use Case: Would like multiple use of slot by same name (#778)

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