From 8d753b0b671971b78e7064fe38c2b0b518823627 Mon Sep 17 00:00:00 2001 From: "Houston (Bot)" <108291165+astrobot-houston@users.noreply.github.com> Date: Wed, 10 Jun 2026 14:10:26 -0700 Subject: [PATCH 1/3] fix(jsx): preserve slot attribute on children of custom elements in MDX (#16892) --- .changeset/fix-custom-element-slot-attribute.md | 7 +++++++ packages/astro/src/runtime/server/jsx.ts | 7 ++++++- .../test/units/render/jsx-custom-elements.test.ts | 12 ++++++++++++ 3 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 .changeset/fix-custom-element-slot-attribute.md diff --git a/.changeset/fix-custom-element-slot-attribute.md b/.changeset/fix-custom-element-slot-attribute.md new file mode 100644 index 000000000000..d38023b498e1 --- /dev/null +++ b/.changeset/fix-custom-element-slot-attribute.md @@ -0,0 +1,7 @@ +--- +'astro': patch +--- + +Fixes custom elements in MDX having their children's `slot` attribute stripped by the JSX runtime + +When custom elements (tags with hyphens like ``) are used in MDX files, the `slot` HTML attribute on their children is now correctly preserved. Previously, the shared JSX runtime would treat `slot` as an Astro slot assignment and remove it from the output, breaking Shadow DOM named slot distribution for web components. diff --git a/packages/astro/src/runtime/server/jsx.ts b/packages/astro/src/runtime/server/jsx.ts index 327677a61b09..1763ec987348 100644 --- a/packages/astro/src/runtime/server/jsx.ts +++ b/packages/astro/src/runtime/server/jsx.ts @@ -123,6 +123,11 @@ Did you forget to import the component or is it possible there is a typo?`); const _slots: Record = { default: [], }; + // For custom HTML elements (string type with hyphen), the `slot` attribute on children + // is a standard HTML attribute for web component Shadow DOM slot distribution, not an + // Astro slot assignment. Skip slot extraction to preserve it in the output. + const isCustomElement = + typeof vnode.type === 'string' && (vnode.type as string).includes('-'); function extractSlots(child: any): any { if (Array.isArray(child)) { return child.map((c) => extractSlots(c)); @@ -131,7 +136,7 @@ Did you forget to import the component or is it possible there is a typo?`); _slots.default.push(child); return; } - if ('slot' in child.props) { + if ('slot' in child.props && !isCustomElement) { _slots[child.props.slot] = [...(_slots[child.props.slot] ?? []), child]; delete child.props.slot; return; diff --git a/packages/astro/test/units/render/jsx-custom-elements.test.ts b/packages/astro/test/units/render/jsx-custom-elements.test.ts index 50a6fa2a839e..cc23cb9466c7 100644 --- a/packages/astro/test/units/render/jsx-custom-elements.test.ts +++ b/packages/astro/test/units/render/jsx-custom-elements.test.ts @@ -102,6 +102,18 @@ describe('renderJSX custom elements', () => { assert.ok(output.includes(''), 'should have closing tag'); }); + it('preserves slot attribute on children of custom elements', async () => { + const result = createMockResult(); + const childVNode = createVNode('svg', { slot: 'icon', xmlns: 'http://www.w3.org/2000/svg' }); + const vnode = createVNode('my-element', { children: [childVNode, 'text content'] }); + const output = String(await renderJSX(result, vnode)); + + assert.ok(output.includes('slot="icon"'), 'should preserve slot attribute on child element'); + assert.ok(output.includes(' { let rendererCheckCalled = false; From 544ee763d7f7894e3b588daa14b09ef32a4d794a Mon Sep 17 00:00:00 2001 From: thelazylama <67310144+thelazylamaGit@users.noreply.github.com> Date: Thu, 11 Jun 2026 07:11:58 +1000 Subject: [PATCH 2/3] fix(dev): refresh stale CSS during HMR (#16957) * fix(dev): invalidate SSR dev-css virtual modules on CSS file changes to prevent stale inline styles * Update hmr-reload.test.ts * Update hmr-css-invalidation.test.ts * Update hmr-css-invalidation.test.ts * Create css-dev-css-hmr.test.ts * Create astro.config.mjs * Create [slug].astro * Create global.css * Update css-dev-css-hmr.test.ts * Fix Lint errors css-dev-css-hmr.test.ts * fix fixture paths * fix fixture path * delete old path * delete old path * cover ?raw css imports with srr invalidation * add comments * fix test: expect [] instead of undefined --------- Co-authored-by: astrobot-houston --- .changeset/fix-stale-css-hmr-16780.md | 9 + .../astro/src/vite-plugin-hmr-reload/index.ts | 32 ++- packages/astro/test/css-dev-css-hmr.test.ts | 72 ++++++ .../fixtures/css-dev-css-hmr/astro.config.mjs | 3 + .../src/pages/posts/[slug].astro | 16 ++ .../css-dev-css-hmr/src/styles/global.css | 3 + .../units/dev/hmr-css-invalidation.test.ts | 232 ++++++++++++++++++ .../vite-plugin-hmr-reload/hmr-reload.test.ts | 19 ++ 8 files changed, 380 insertions(+), 6 deletions(-) create mode 100644 .changeset/fix-stale-css-hmr-16780.md create mode 100644 packages/astro/test/css-dev-css-hmr.test.ts create mode 100644 packages/astro/test/fixtures/css-dev-css-hmr/astro.config.mjs create mode 100644 packages/astro/test/fixtures/css-dev-css-hmr/src/pages/posts/[slug].astro create mode 100644 packages/astro/test/fixtures/css-dev-css-hmr/src/styles/global.css create mode 100644 packages/astro/test/units/dev/hmr-css-invalidation.test.ts diff --git a/.changeset/fix-stale-css-hmr-16780.md b/.changeset/fix-stale-css-hmr-16780.md new file mode 100644 index 000000000000..aa2bd8a09012 --- /dev/null +++ b/.changeset/fix-stale-css-hmr-16780.md @@ -0,0 +1,9 @@ +--- +'astro': patch +--- + +Fixes stale inline CSS in server-rendered HTML after CSS file edits during dev + +When editing a CSS file (`.css`, `.scss`, etc.) during development, the inline `