bug: ion-label adds an empty comment as its first child, breaking SolidJS integration #29756
Comments
spion
changed the title
spion
changed the title
|
This is likely caused by the use of the emulated slot feature from Stencil that is available with Ionic Framework is unlikely to move from scoped to shadow in the near term, as it is a breaking change and will require a fair amount of validation to maintain styling consistency with the existing experience. Stencil uses the comment node for markers in the DOM for where nodes were moved from/to and I believe it may also be used when hoisting the style tags for scoped components, but I am less confident on that. |
|
Hmm. I see that vdom annotations only seem to be used for hydration. Is there a way to turn them off if there is no SSR? https://github.com/search?q=repo%3Aionic-team%2Fstencil%20insertVdomAnnotations&type=code |
|
@spion are you consuming the hydrate script from Ionic Framework in your implementation? Cloudfront is returning 403s from Stackblitz right now so I'm unable to confirm. |
|
I don't believe I am - this is the entire test case: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ionic App</title>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"
></script>
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
/>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label id="test">test</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
<script>
setTimeout(() => {
document.getElementById('test').firstChild.data = 'Change after 3s';
}, 3000);
</script>
</body>
</html> |
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
ion-label seems to add an empty HTML comment (which results with a DOM comment element). This breaks libraries such as SolidJS which make assumptions to optimize the updates when there is a single string child inside a component.
Arguably, this could be considered a SolidJS bug (ryansolid/dom-expressions#337) but the behavior is still strange.
Expected Behavior
ion-label should not produce empty comment nodes
Steps to Reproduce
Repro with SolidJS
Repro without SolidJS - using inspect element you can see that IonLabel's firstChild is not the text node, but a strange empty comment node, and that's why the timer fails to update the content and updates the comment instead.
Code Reproduction URL
https://stackblitz.com/edit/github-pyx5ga-pmauak?file=index.html
Ionic Info
N/A (stackblitz example should be sufficient)
Additional Information
No response
The text was updated successfully, but these errors were encountered: