webc
webc copied to clipboard
Elements with slot attributes can't be naturally rendered via the "light DOM" for DSD components
Let's say I have a component my-timeline with a declarative Shadow DOM template, and inside the template it wants to render child components:
<template shadowrootmode="open">
<h3>Timeline</h3>
<my-timeline-item>Item 1</my-timeline-item>
<my-timeline-item>Item 2 <aside slot="info">More Info</aside></my-timeline-item>
<slot webc:raw></slot> <- other parent content
</template>
<slot></slot>
and the timeline item:
<template shadowrootmode="open">
<div>---</div>
<slot webc:raw></slot>
<div>---</div>
<slot name="info" webc:raw></slot>
</template>
<slot></slot>
The problem is the aside element for the info slot is getting processed by WebC as its own slot, and not included in the default rendering. I could add <slot name="info"></slot> directly at the bottom of the timeline item component, but then it would just pull in the aside element without the slot attribute which the DSD template expects.
I don't know if there's any way to bypass slot= getting roped into the WebC processing altogether in cases like these.
See also: #185