Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(runtime): add slotchange event and assignedNodes / assignedElements methods for scoped: true slots #6151

Merged
merged 12 commits into from
Feb 19, 2025

Conversation

johnjenkins
Copy link
Contributor

@johnjenkins johnjenkins commented Feb 10, 2025

What is the current behavior?

Stencil's polyfilled - 'Pretend slots' - don't act like their native counterparts:

  1. There's no way to get the nodes that are slotted (assignedNodes() / assignedElements())
  2. There's no way to know when the slotted nodes have changed (slotchange event)

At present, on a scoped: true component devs have to resort to clunky mutation observers (for text, comment and element nodes on a default slot), saving node references to internal state to track when they change.

This is frustrating as Stencil, internally, knows what is slotted.

Making this knowledge available to users will enable them to remove substantial LOC and mirroring the the native APIs makes swapping between native & proprietary behaviour much simpler.

GitHub Issue Number: #3782

What is the new behavior?

Fixes #3782

assignedNodes and assignedElements methods have been added to the mock <slot /> nodes (which in reality is an an empty text node (or a comment node in debug mode) or a <slot-fb /> if there is fallback nodes).

Documentation

Does this introduce a breaking change?

  • Yes
  • No

No - although, there is a change in behaviour .. Previously when doing something like <slot ref={s => this.slot} /> ... the ref would resolve to a slotted node. I think this behaviour is 1) unintuitive & 2) not documented.

Testing

New WDIO tests

Other information

@johnjenkins johnjenkins changed the title feat(runtime): add slotchange events and assignedNodes / assignedElements for scoped: true slots feat(runtime): add slotchange event and assignedNodes / assignedElements methods for scoped: true slots Feb 10, 2025
@johnjenkins johnjenkins marked this pull request as ready for review February 15, 2025 00:01
@johnjenkins johnjenkins requested a review from a team as a code owner February 15, 2025 00:01
@johnjenkins
Copy link
Contributor Author

@christian-bromann I could put this behind a new extras config flag.. WDYT?

Copy link
Member

@christian-bromann christian-bromann left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As always, fantastic job 🚀

@christian-bromann christian-bromann merged commit 2a1038e into ionic-team:main Feb 19, 2025
71 checks passed
@johnjenkins johnjenkins deleted the polyfill-slotchange branch February 19, 2025 10:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: slotchange event not firing with scoped mode
2 participants