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.

Sign up for GitHub

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

Jump to bottom

bug: slot element loses its parent reference and disappears when its parent is rendered conditionally #3913

Closed
3 tasks done
yigityuce opened this issue Dec 15, 2022 · 5 comments
Closed
3 tasks done

bug: slot element loses its parent reference and disappears when its parent is rendered conditionally #3913

yigityuce opened this issue Dec 15, 2022 · 5 comments
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil slot-related

Comments

@yigityuce
Copy link
Contributor

Prerequisites

Stencil Version

2.13.0

Current Behavior

When I try to render the default slot within the conditionally rendered parent element in the no-shadow component and the parent element is changed, the slot relocation algorithm loses the parent element reference and the slot element is not relocated (re-rendered) into the new parent element.

Expected Behavior

Slot element should be relocated to the new parent element.

System Info

No response

Steps to Reproduce

In the reproduction project:

  1. you will see the typography element is rendered correctly and the slot will be displayed within the "span" element in the "app-typography" component DOM structure
  2. when the user clicks on the "Toggle Element type" button, the handler function finds the typography element and changes its "element" attribute (which controls the rendered element tag of the slot's parent)
  3. then you will see the "span" element turns to the "p" element within the "app-typography" component DOM structure and the slot disappears (not relocated)

Code Reproduction URL

https://github.com/yigityuce/stencil-conditional-rendering-issue/commits/master

Additional Information

The issue might be here in the renderer (the old and new node tags checking)
https://github.com/ionic-team/stencil/blob/main/src/runtime/vdom/vdom-render.ts#L153

The goal is to follow the accessibility rules and the sementic web. I want to render the hX tags (h1, h2, ..., h6) correctly regarding the typography as Material UI does. (https://mui.com/material-ui/react-typography/#changing-the-semantic-element)

And the inspiration comes from the ionic-button component: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/button/button.tsx#L302
@ionitron-bot ionitron-bot bot added the triage label Dec 15, 2022
@johnjenkins johnjenkins mentioned this issue Dec 15, 2022
Closed
@johnjenkins
Copy link
Contributor

just tested - this bug will be fixed by this pr

@yigityuce
Copy link
Contributor Author

yigityuce commented Dec 15, 2022 •
edited
Loading

just tested - this bug will be fixed by this pr

thanks for your quick response!

However, do you expect that this PR is gonna be merged soon? I see it is open since June 2021 😞 Do you think I can do anything to speed up this process?

@rwaskiewicz
Copy link
Contributor

Hey all,

We're going to be working on slot-related fixes following the Stencil v3 release, which is slated to occur in January. Thanks!

@rwaskiewicz rwaskiewicz added Bug: Validated This PR or Issue is verified to be a bug within Stencil and removed triage labels Dec 15, 2022
@rwaskiewicz
Copy link
Contributor

Potentially related #4284

tanner-reits pushed a commit that referenced this issue Nov 30, 2023
fix(runtime): re-relocate slot if parent element's tagname changes
16136a2 
If a slot is located in an element and that element's tag is dynamically changed (e.g. from `p` to `span`), we need to re-relocate the slot on re-render

STENCIL-672: slot element loses its parent reference and disappears when its parent is rendered conditionally

Fixes: #4284, #3913
tanner-reits pushed a commit that referenced this issue Nov 30, 2023
fix(runtime): re-relocate slot if parent element's tagname changes
719320f 
If a slot is located in an element and that element's tag is dynamically changed (e.g. from `p` to `span`), we need to re-relocate the slot on re-render

STENCIL-672: slot element loses its parent reference and disappears when its parent is rendered conditionally

Fixes: #4284, #3913
@tanner-reits tanner-reits mentioned this issue Dec 1, 2023
Merged
2 tasks
github-merge-queue bot pushed a commit that referenced this issue Dec 6, 2023
@tanner-reits @rwaskiewicz
fix(runtime): relocate slotted content when slot parent element tag c…
4303d6a 
…hanges (#5120)

* fix(runtime): re-relocate slot if parent element's tagname changes

If a slot is located in an element and that element's tag is dynamically changed (e.g. from `p` to `span`), we need to re-relocate the slot on re-render

STENCIL-672: slot element loses its parent reference and disappears when its parent is rendered conditionally

Fixes: #4284, #3913

* add e2e tests

* code documentation

* put changes behind slot fix flag

* resolve new SNC

* Apply suggestions from code review

Co-authored-by: Ryan Waskiewicz <ryanwaskiewicz@gmail.com>

---------

Co-authored-by: Ryan Waskiewicz <ryanwaskiewicz@gmail.com>
github-merge-queue bot pushed a commit that referenced this issue Dec 6, 2023
@tanner-reits @christian-bromann
fix(runtime): hide slotted content with no destination in scoped comp…
77bce27 
…onents (#5135)

* fix(runtime): re-relocate slot if parent element's tagname changes

If a slot is located in an element and that element's tag is dynamically changed (e.g. from `p` to `span`), we need to re-relocate the slot on re-render

STENCIL-672: slot element loses its parent reference and disappears when its parent is rendered conditionally

Fixes: #4284, #3913

* add e2e tests

* code documentation

* put changes behind slot fix flag

* resolve new SNC

* reset `hidden` state of nodes on relocate

It is possible for slotted content to still be invisible in the DOM if the slot was not rendered on the first render. This commit resets the `hidden` attribute of a node on successful relocation.

STENCIL-1053

* hide slot content without a home in `scoped` components

Hides any content that is projected through to a Stencil component that does not have a destination slot. Only for `scoped` components.

Fixes #2877

STENCIL-938

* add e2e tests for hiding content without a slot

* revert karma config

* PR feedback

Co-authored-by: Christian Bromann <git@bromann.dev>

---------

Co-authored-by: Christian Bromann <git@bromann.dev>
@christian-bromann
Copy link
Member

Hey there 👋 we have released a Stencil version v4.8.2 with a fix for this issue. Make sure you enable it with the experimentalSlotFixes flag in your Stencil configuration. Let us know if you have any further question. Thanks for reporting!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil slot-related
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(shadowDomShim): slot behaviour johnjenkins/stencil
4 participants
@christian-bromann @rwaskiewicz @johnjenkins @yigityuce