Elements with slot attributes can't be naturally rendered via the "light DOM" for DSD components
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 46
- Avg merge
- 10m
- Merged PRs (30d)
- 2
Description
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with the my-timeline and my-timeline-item declarative Shadow DOM templates shown here, focusing on how slot attributes and webc:raw are processed. Trace the light-DOM and slot-rendering entry points, then verify that the aside slot="info" remains available to the DSD component without being incorrectly consumed by WebC.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100