Prerequisites
Stencil Version
3.2.1
Current Behavior
I have a Stencil web component with an <a> tag element that needs to be changed to <p> tag to prevent the user from clicking it.
The dynamic component is working, however I noticed that the content that goes to the went missing.
I have a simple component code:
import { Component, State, h } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: false,
})
export class MyComponent {
@State() customTag: string = 'a';
componentDidLoad() {
setTimeout(() => {
this.customTag = 'p';
alert("I'm changed!");
}, 3000);
}
render() {
return (
<this.customTag href="#">
<slot />
</this.customTag>
);
}
}In my index.html:
<body>
<my-component>This is a sample link</my-component>
</body>
It shows the slot content initially, then I tried to change the element dynamically using timeout after 3 seconds.
Then the slot content went missing as show in GIF below:
Expected Behavior
We have the expectation that the slot content still persist after the component tag is changed after 3s:
System Info
Node version: v18.16.0
NPM version: v9.5.1
Computer: MacOS (Ventura 13.2.1)
Browser: Tried on both Firefox (12.0.1 (64-bit)) and Chrome (112.0.5615.49)
Steps to Reproduce
To replicate it, I did it with Stencil Component Starter.
Please refer to the link below for reproduction.
Code Reproduction URL
https://github.com/AaronKow/stencil-slot-missing-issue
Additional Information
No response
Prerequisites
Stencil Version
3.2.1
Current Behavior
I have a Stencil web component with an
<a>tag element that needs to be changed to<p>tag to prevent the user from clicking it.The dynamic component is working, however I noticed that the content that goes to the went missing.
I have a simple component code:
In my
index.html:It shows the slot content initially, then I tried to change the element dynamically using timeout after 3 seconds.
Then the slot content went missing as show in GIF below:
Expected Behavior
We have the expectation that the slot content still persist after the component tag is changed after 3s:
System Info
Steps to Reproduce
To replicate it, I did it with Stencil Component Starter.
Please refer to the link below for reproduction.
Code Reproduction URL
https://github.com/AaronKow/stencil-slot-missing-issue
Additional Information
No response