feat: support `clonable` in the shadow option of @Component
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 55/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- frontend
Research direction
Start by tracing ShadowRootOptions and the @Component decorator into CMP_FLAGS, then inspect createShadowRoot and the existing BUILD.shadowDelegatesFocus path. Add the clonable option through the same flow and verify that attachShadow receives it when enabled, while preserving current behavior when it is absent.
Written by the indexing model from the issue text.
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already include this feature request, without success.
Describe the Feature Request
Stencil's createShadowRoot currently builds its options from mode, delegatesFocus and slotAssignment. There is no way for a component author to request clonable, and no way to reach the attachShadow call to set it.
The request is to expose it the same way delegatesFocus and slotAssignment already are.
Describe the Use Case
Any library that measures or duplicates DOM through cloneNode gets an empty element back when it reaches a Stencil shadow component, because the shadow root is silently dropped.
We hit this with AG Grid's column auto-sizing. To size a column to its contents, AG Grid deep clones the cell into an off screen container, reads offsetWidth, then discards the dummy clone. When a cell contains a Stencil shadow component the clone is an empty shell, so the measurement comes back at zero and the column collapses to the width of its header.
Describe Preferred Solution
Mirror the native option, exactly as the existing two options.
- Add a
clonableoption to ShadowRootOptions. - Add a
shadowClonablebit toCMP_FLAGS, set from the decorator at compile time. - Set it in
createShadowRoot, behind a build flag like the existingBUILD.shadowDelegatesFocus.
Describe Alternatives
Patching the runtime.
Related Code
No response
Additional Information
No response
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 855
- Avg merge
- 4h 7m
- Merged PRs (30d)
- 44
Contributor guide
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.
More from stenciljs/core
-
Stencil v5
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
Bug: Validated Stencil v5
Difficulty 4/5 3-5 days Newbie friendliness 48/100
-
Feature: Want this? Upvote it!
Difficulty 5/5 Over a week Newbie friendliness 25/100
-
Feature: Want this? Upvote it!
Difficulty 4/5 3-5 days Newbie friendliness 48/100
-
Stencil v5
Difficulty 5/5 Over a week Newbie friendliness 35/100
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·