Open nolanlawson opened 2 weeks ago
BTW this would be a breaking change and this issue is not up for grabs. I am documenting the existing behavior without proposing a solution.
It's also not clear that light DOM slots should behave exactly like native shadow DOM slots – there are plenty of cases where they don't (e.g. lazy vs eager rendering, support for scoped slots, etc.).
Another option here is to turn the compiler warning into an error. This would make it much easier to reason about duplicate slots in either light DOM or shadow DOM, since they wouldn't exist. 🙂
However, this would be a breaking change, and so would need to be done via API versioning.
Currently, if you use duplicate
<slot>
s in the same HTML template in light DOM, e.g.:... then it will render the slots duplicated:
This works regardless of named slots or the default slot.
This is in contrast with native shadow DOM, which renders the first slot but ignores any subsequent slots.
Either way, you will get a warning during template compilation:
This is because duplicate slots are generally a component author mistake. Usually you do not want duplicates – especially in native shadow DOM, where subsequent slots are ignored.
Here is a summary of how other frameworks handle this case:
So in other words, the current LWC light DOM behavior matches Svelte's and Vue's behavior.