Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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