Astro Info
Astro v6.3.8 [*]
Node v24.15.0
Package Manager pnpm
Output static
Integrations @astrojs/mdx
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
According to the custom elements spec, all custom elements must be defined with a tag name that includes a hyphen, to avoid colliding with future HTML elements.
@astrobot-houston created #16819 to resolve #16273, but this change causes every custom element to be “claimed” by Astro as an Astro component, therefore preventing it from being hydrated properly on the client.
Because the shared JSX runtime assumes the custom element is an Astro component or something, it strips the slot property and not sure what else (see packages/astro/src/runtime/server/jsx.ts line 96–97 to see the hyphen stripping).
This might happen in JSX files too with the React/Preact integration, but I’ve mainly tested it with the MDX integration.
*: This bug started in v6.3.7, versions before that, so versions ≤ 6.3.6 don’t have this bug. The StackBlitz uses the latest version as of the time of creating it, v6.4.1, and it still isn’t fixed in this version.
#16273 complains about custom element SSR stuff, but SSR isn’t really compatible with web components, as it is still very buggy.
What's the expected result?
Custom elements must be parsed by the HTML renderer, not the Astro shared JSX runtime (i.e., revert #16819 if plausible).
Screenshot of the info icon having its slot property removed, causing misalignment and being incorrectly coloured with the text colour:
Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-hmcwynmc
Participation
Astro Info
If this issue only occurs in one browser, which browser is a problem?
No response
Describe the Bug
According to the custom elements spec, all custom elements must be defined with a tag name that includes a hyphen, to avoid colliding with future HTML elements.
@astrobot-houston created #16819 to resolve #16273, but this change causes every custom element to be “claimed” by Astro as an Astro component, therefore preventing it from being hydrated properly on the client.
Because the shared JSX runtime assumes the custom element is an Astro component or something, it strips the
slotproperty and not sure what else (see packages/astro/src/runtime/server/jsx.ts line 96–97 to see the hyphen stripping).This might happen in JSX files too with the React/Preact integration, but I’ve mainly tested it with the MDX integration.
*: This bug started in v6.3.7, versions before that, so versions ≤ 6.3.6 don’t have this bug. The StackBlitz uses the latest version as of the time of creating it, v6.4.1, and it still isn’t fixed in this version.
#16273 complains about custom element SSR stuff, but SSR isn’t really compatible with web components, as it is still very buggy.
What's the expected result?
Custom elements must be parsed by the HTML renderer, not the Astro shared JSX runtime (i.e., revert #16819 if plausible).
Screenshot of the info icon having its
slotproperty removed, causing misalignment and being incorrectly coloured with the text colour:Link to Minimal Reproducible Example
https://stackblitz.com/edit/github-hmcwynmc
Participation