11ty / webc

Single File Web Components
MIT License
1.3k stars 36 forks source link

Elements with slot attributes can't be naturally rendered via the "light DOM" for DSD components #162

Open jaredcwhite opened 1 year ago

jaredcwhite commented 1 year ago

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.

jaredcwhite commented 10 months ago

See also: #185