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 `<my-element>`) 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/.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 `<style>` tags in server-rendered HTML would retain old CSS content instead of updating. This caused a brief flash of old CSS (FOUC) on fresh page loads before Vite's client-side HMR corrected the styles.
+
+The fix ensures that Astro's per-route dev CSS virtual modules are invalidated in both the SSR module graph and the module runner's evaluation cache when a style file changes, so the next page render picks up the fresh CSS.
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<string, any> = {
 				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/src/vite-plugin-hmr-reload/index.ts b/packages/astro/src/vite-plugin-hmr-reload/index.ts
index 85f47aa94a3b..5f55d6cf891f 100644
--- a/packages/astro/src/vite-plugin-hmr-reload/index.ts
+++ b/packages/astro/src/vite-plugin-hmr-reload/index.ts
@@ -1,18 +1,24 @@
 import { isRunnableDevEnvironment, type EnvironmentModuleNode, type Plugin } from 'vite';
 import { VIRTUAL_PAGE_RESOLVED_MODULE_ID } from '../vite-plugin-pages/const.js';
+import { RESOLVED_MODULE_DEV_CSS_PREFIX } from '../vite-plugin-css/const.js';
 import { getDevCssModuleNameFromPageVirtualModuleName } from '../vite-plugin-css/util.js';
 import { isAstroServerEnvironment } from '../environments.js';
 
 const STYLE_EXT_REGEX = /\.(?:css|scss|sass|less|styl|pcss)$/i;
+const RAW_QUERY_REGEX = /(?:\?|&)raw(?:&|$)/;
+
+function hasStyleExtension(id: string): boolean {
+	// Style module IDs may include Vite query params such as ?used or ?direct.
+	return STYLE_EXT_REGEX.test(id.split('?')[0]);
+}
 
 function isStyleModule(mod: EnvironmentModuleNode): boolean {
-	if (mod.file && STYLE_EXT_REGEX.test(mod.file)) return true;
+	// CSS imported with ?raw is a JS string export, so SSR importers need to be invalidated
+	// instead of relying on Vite's client-side CSS HMR handling.
+	if (mod.id && RAW_QUERY_REGEX.test(mod.id) && hasStyleExtension(mod.id)) return false;
+	if (mod.file && hasStyleExtension(mod.file)) return true;
 	// CSS modules and other style files may have query params in their id (e.g. ?used, ?direct)
-	if (mod.id) {
-		const idPath = mod.id.split('?')[0];
-		if (STYLE_EXT_REGEX.test(idPath)) return true;
-	}
-	return false;
+	return mod.id ? hasStyleExtension(mod.id) : false;
 }
 
 /**
@@ -97,6 +103,20 @@ export default function hmrReload(): Plugin {
 				// Vite's built-in style update mechanism, which works for all pages
 				// (with or without framework components).
 				if (hasSkippedStyleModules) {
+					// Invalidate all per-route dev CSS virtual modules so the next SSR request
+					// re-collects CSS with updated content. Without this, the inline <style>
+					// tags injected for anti-FOUC would serve stale CSS after HMR updates.
+					for (const [id, mod] of this.environment.moduleGraph.idToModuleMap) {
+						if (id.startsWith(RESOLVED_MODULE_DEV_CSS_PREFIX)) {
+							this.environment.moduleGraph.invalidateModule(mod, undefined, timestamp, true);
+							if (isRunnableDevEnvironment(this.environment)) {
+								const runnerMod = this.environment.runner.evaluatedModules.getModuleById(id);
+								if (runnerMod) {
+									this.environment.runner.evaluatedModules.invalidateModule(runnerMod);
+								}
+							}
+						}
+					}
 					return [];
 				}
 
diff --git a/packages/astro/test/css-dev-css-hmr.test.ts b/packages/astro/test/css-dev-css-hmr.test.ts
new file mode 100644
index 000000000000..2b02a64770b3
--- /dev/null
+++ b/packages/astro/test/css-dev-css-hmr.test.ts
@@ -0,0 +1,70 @@
+import assert from 'node:assert/strict';
+import { after, before, describe, it } from 'node:test';
+import { setTimeout as delay } from 'node:timers/promises';
+
+import * as cheerio from 'cheerio';
+import { loadFixture, type DevServer, type Fixture } from './test-utils.ts';
+
+describe('CSS - dev CSS HMR', () => {
+	let fixture: Fixture;
+	let devServer: DevServer;
+
+	before(
+		async () => {
+			fixture = await loadFixture({
+				root: './fixtures/css-dev-css-hmr/',
+			});
+
+			devServer = await fixture.startDevServer();
+		},
+		{ timeout: 30000 },
+	);
+
+	after(async () => {
+		await devServer.stop();
+	});
+
+	async function getInlineStyles(pathname: string) {
+		const response = await fixture.fetch(pathname);
+		assert.equal(response.status, 200);
+
+		const html = await response.text();
+		const $ = cheerio.load(html);
+
+		return $('style').text();
+	}
+
+	async function waitForInlineStyles(pathname: string, pattern: RegExp) {
+		let styles = '';
+
+		for (let i = 0; i < 20; i++) {
+			styles = await getInlineStyles(pathname);
+
+			if (pattern.test(styles)) {
+				return styles;
+			}
+
+			await delay(50);
+		}
+
+		assert.match(styles, pattern);
+		return styles;
+	}
+
+	it('updates server-rendered inline CSS after a style-only change', {
+		timeout: 30000,
+	}, async () => {
+		const beforeStyles = await getInlineStyles('/posts/test');
+
+		assert.match(beforeStyles, /rgb\(255,\s*0,\s*0\)/);
+		assert.doesNotMatch(beforeStyles, /rgb\(0,\s*0,\s*255\)/);
+
+		await fixture.editFile('src/styles/global.css', (contents) =>
+			contents.replace('rgb(255, 0, 0)', 'rgb(0, 0, 255)'),
+		);
+
+		const afterStyles = await waitForInlineStyles('/posts/test', /rgb\(0,\s*0,\s*255\)/);
+
+		assert.doesNotMatch(afterStyles, /rgb\(255,\s*0,\s*0\)/);
+	});
+});
diff --git a/packages/astro/test/fixtures/css-dev-css-hmr/astro.config.mjs b/packages/astro/test/fixtures/css-dev-css-hmr/astro.config.mjs
new file mode 100644
index 000000000000..86dbfb924824
--- /dev/null
+++ b/packages/astro/test/fixtures/css-dev-css-hmr/astro.config.mjs
@@ -0,0 +1,3 @@
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({});
diff --git a/packages/astro/test/fixtures/css-dev-css-hmr/src/pages/posts/[slug].astro b/packages/astro/test/fixtures/css-dev-css-hmr/src/pages/posts/[slug].astro
new file mode 100644
index 000000000000..309903db690a
--- /dev/null
+++ b/packages/astro/test/fixtures/css-dev-css-hmr/src/pages/posts/[slug].astro
@@ -0,0 +1,16 @@
+---
+import '../../styles/global.css';
+
+export function getStaticPaths() {
+	return [{ params: { slug: 'test' } }];
+}
+
+const { slug } = Astro.params;
+---
+
+<html>
+	<head></head>
+	<body>
+		<p class="hmr-target">Post: {slug}</p>
+	</body>
+</html>
diff --git a/packages/astro/test/fixtures/css-dev-css-hmr/src/styles/global.css b/packages/astro/test/fixtures/css-dev-css-hmr/src/styles/global.css
new file mode 100644
index 000000000000..14eae0597bd1
--- /dev/null
+++ b/packages/astro/test/fixtures/css-dev-css-hmr/src/styles/global.css
@@ -0,0 +1,3 @@
+.hmr-target {
+	color: rgb(255, 0, 0);
+}
diff --git a/packages/astro/test/units/dev/hmr-css-invalidation.test.ts b/packages/astro/test/units/dev/hmr-css-invalidation.test.ts
new file mode 100644
index 000000000000..c76730ca5b52
--- /dev/null
+++ b/packages/astro/test/units/dev/hmr-css-invalidation.test.ts
@@ -0,0 +1,230 @@
+import * as assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+import hmrReload from '../../../dist/vite-plugin-hmr-reload/index.js';
+
+/**
+ * Tests for CSS HMR invalidation of SSR dev-css virtual modules.
+ *
+ * When a CSS file changes during dev, the astro:hmr-reload plugin must
+ * invalidate the per-route virtual:astro:dev-css:* modules in the SSR
+ * environment so the next SSR render picks up fresh CSS content.
+ * Without this, the server-rendered inline <style> tags serve stale CSS.
+ *
+ * Note: Runner evaluation cache invalidation (via isRunnableDevEnvironment)
+ * requires a real Vite RunnableDevEnvironment instance and cannot be unit
+ * tested with mocks. That path is verified through manual integration testing.
+ */
+describe('astro:hmr-reload CSS invalidation', () => {
+	type HotUpdateHandler = (
+		this: { environment: unknown },
+		context: {
+			modules: Array<{ id: string | null; file?: string }>;
+			server: unknown;
+			timestamp: number;
+			file: string;
+		},
+	) => unknown;
+
+	function getHotUpdateHandler(): HotUpdateHandler {
+		const plugin = hmrReload();
+		const hotUpdate = plugin.hotUpdate;
+
+		assert.ok(hotUpdate && typeof hotUpdate === 'object' && 'handler' in hotUpdate);
+
+		return hotUpdate.handler as unknown as HotUpdateHandler;
+	}
+
+	/**
+	 * Creates a mock environment and context for testing the hotUpdate handler.
+	 * The environment mock is not a real RunnableDevEnvironment, so
+	 * isRunnableDevEnvironment() will return false. This means runner cache
+	 * invalidation won't be tested here, but module graph invalidation will.
+	 */
+	function createMockContext(options: {
+		modules: Array<{ id: string | null; file?: string }>;
+		moduleGraphEntries?: Array<[string, { id: string }]>;
+	}) {
+		const invalidatedModuleGraphIds: string[] = [];
+
+		const moduleGraphEntries = new Map<string, { id: string }>(options.moduleGraphEntries ?? []);
+
+		const environment = {
+			name: 'ssr',
+			moduleGraph: {
+				idToModuleMap: moduleGraphEntries,
+				getModuleById: (id: string) => moduleGraphEntries.get(id) ?? null,
+				invalidateModule: (
+					mod: { id: string },
+					_seen?: Set<unknown>,
+					_ts?: number,
+					_isHmr?: boolean,
+				) => {
+					invalidatedModuleGraphIds.push(mod.id);
+				},
+			},
+		};
+
+		const server = {
+			environments: {
+				client: {
+					moduleGraph: {
+						getModuleById: (_id: string) => null as object | null,
+					},
+				},
+			},
+			ws: { send: () => {} },
+		};
+
+		return {
+			environment,
+			server,
+			invalidatedModuleGraphIds,
+		};
+	}
+
+	it('invalidates dev-css virtual modules in module graph when a CSS file changes', () => {
+		const devCssId1 = '\0virtual:astro:dev-css:src/pages/index@_@astro';
+		const devCssId2 = '\0virtual:astro:dev-css:src/pages/posts/[id]@_@astro';
+
+		const { environment, server, invalidatedModuleGraphIds } = createMockContext({
+			modules: [{ id: '/path/to/global.css', file: '/path/to/global.css' }],
+			moduleGraphEntries: [
+				[devCssId1, { id: devCssId1 }],
+				[devCssId2, { id: devCssId2 }],
+				['some-other-module', { id: 'some-other-module' }],
+			],
+		});
+
+		const hotUpdate = getHotUpdateHandler();
+
+		const result = hotUpdate.call(
+			{ environment },
+			{
+				modules: [{ id: '/path/to/global.css', file: '/path/to/global.css' }],
+				server,
+				timestamp: Date.now(),
+				file: '/path/to/global.css',
+			},
+		);
+
+		// Should return empty array (handled, no full reload)
+		assert.deepEqual(result, []);
+
+		// Both dev-css virtual modules should be invalidated in the module graph
+		assert.ok(
+			invalidatedModuleGraphIds.includes(devCssId1),
+			'dev-css module for index should be invalidated in module graph',
+		);
+		assert.ok(
+			invalidatedModuleGraphIds.includes(devCssId2),
+			'dev-css module for dynamic route should be invalidated in module graph',
+		);
+
+		// Non-dev-css modules should NOT be invalidated
+		assert.ok(
+			!invalidatedModuleGraphIds.includes('some-other-module'),
+			'non-dev-css modules should not be invalidated',
+		);
+	});
+
+	it('invalidates dev-css modules for SCSS file changes', () => {
+		const devCssId = '\0virtual:astro:dev-css:src/pages/index@_@astro';
+
+		const { environment, server, invalidatedModuleGraphIds } = createMockContext({
+			modules: [{ id: '/path/to/styles.scss', file: '/path/to/styles.scss' }],
+			moduleGraphEntries: [[devCssId, { id: devCssId }]],
+		});
+
+		const hotUpdate = getHotUpdateHandler();
+
+		const result = hotUpdate.call(
+			{ environment },
+			{
+				modules: [{ id: '/path/to/styles.scss', file: '/path/to/styles.scss' }],
+				server,
+				timestamp: Date.now(),
+				file: '/path/to/styles.scss',
+			},
+		);
+
+		assert.deepEqual(result, []);
+		assert.ok(
+			invalidatedModuleGraphIds.includes(devCssId),
+			'dev-css module should be invalidated for SCSS changes',
+		);
+	});
+
+	it('does not invalidate dev-css modules when no style modules are present', () => {
+		const devCssId = '\0virtual:astro:dev-css:src/pages/index@_@astro';
+
+		const { environment, server, invalidatedModuleGraphIds } = createMockContext({
+			modules: [{ id: '/path/to/component.astro', file: '/path/to/component.astro' }],
+			moduleGraphEntries: [[devCssId, { id: devCssId }]],
+		});
+
+		// The .astro file exists in the client module graph too
+		server.environments.client.moduleGraph.getModuleById = (id: string) =>
+			id === '/path/to/component.astro' ? { id } : null;
+
+		const hotUpdate = getHotUpdateHandler();
+
+		const result = hotUpdate.call(
+			{ environment },
+			{
+				modules: [{ id: '/path/to/component.astro', file: '/path/to/component.astro' }],
+				server,
+				timestamp: Date.now(),
+				file: '/path/to/component.astro',
+			},
+		);
+
+		// For client-visible module changes, the handler returns [] to prevent default SSR propagation
+		assert.deepEqual(result, []);
+
+		// The dev-css module should NOT be invalidated (CSS invalidation is for style-only changes)
+		assert.equal(invalidatedModuleGraphIds.length, 0);
+	});
+
+	it('returns empty array for CSS changes to prevent full page reload', () => {
+		const { environment, server } = createMockContext({
+			modules: [{ id: '/path/to/styles.css', file: '/path/to/styles.css' }],
+		});
+
+		const hotUpdate = getHotUpdateHandler();
+
+		const result = hotUpdate.call(
+			{ environment },
+			{
+				modules: [{ id: '/path/to/styles.css', file: '/path/to/styles.css' }],
+				server,
+				timestamp: Date.now(),
+				file: '/path/to/styles.css',
+			},
+		);
+
+		// Must return [] to prevent Vite's default SSR HMR propagation
+		assert.deepEqual(result, []);
+	});
+
+	it('handles empty dev-css module map gracefully', () => {
+		const { environment, server, invalidatedModuleGraphIds } = createMockContext({
+			modules: [{ id: '/path/to/styles.css', file: '/path/to/styles.css' }],
+			moduleGraphEntries: [],
+		});
+
+		const hotUpdate = getHotUpdateHandler();
+
+		const result = hotUpdate.call(
+			{ environment },
+			{
+				modules: [{ id: '/path/to/styles.css', file: '/path/to/styles.css' }],
+				server,
+				timestamp: Date.now(),
+				file: '/path/to/styles.css',
+			},
+		);
+
+		assert.deepEqual(result, []);
+		assert.equal(invalidatedModuleGraphIds.length, 0);
+	});
+});
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('</unknown-element>'), '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('<svg'), 'should render the child svg element');
+		assert.ok(output.includes('<my-element'), 'should render the custom element');
+		assert.ok(output.includes('text content'), 'should render text children');
+	});
+
 	it('does not route standard elements through the renderer pipeline', async () => {
 		let rendererCheckCalled = false;
 
diff --git a/packages/astro/test/units/vite-plugin-hmr-reload/hmr-reload.test.ts b/packages/astro/test/units/vite-plugin-hmr-reload/hmr-reload.test.ts
index f3f1d3b2652a..05364aa907b4 100644
--- a/packages/astro/test/units/vite-plugin-hmr-reload/hmr-reload.test.ts
+++ b/packages/astro/test/units/vite-plugin-hmr-reload/hmr-reload.test.ts
@@ -45,6 +45,7 @@ describe('astro:hmr-reload', () => {
 		const environment = {
 			name: options.environmentName,
 			moduleGraph: {
+				idToModuleMap: new Map(),
 				invalidateModule(mod: any, seen?: Set<any>, _ts?: number, _hmr?: boolean) {
 					invalidated.push(mod);
 					if (seen) {
@@ -171,6 +172,24 @@ describe('astro:hmr-reload', () => {
 		assert.equal(ctx.wsSent.length, 0, 'should NOT send full-reload for style modules');
 	});
 
+	it('invalidates raw CSS imports as SSR-only modules', () => {
+		const mod = createMockModule('/src/styles/main.css?raw', '/src/styles/main.css');
+		const ctx = createMockContext({
+			environmentName: 'ssr',
+			modules: [mod],
+			clientModuleIds: [],
+		});
+
+		const result = ctx.call();
+
+		assert.ok(Array.isArray(result), 'should return an array');
+		assert.equal(result.length, 0, 'should return empty array');
+		assert.equal(ctx.invalidated.length, 1, 'should invalidate raw CSS module');
+		assert.equal(ctx.invalidated[0], mod);
+		assert.equal(ctx.wsSent.length, 1);
+		assert.deepEqual(ctx.wsSent[0], { type: 'full-reload' });
+	});
+
 	it('invalidates importers in the module graph for dynamic import chains', () => {
 		const component = createMockModule('/src/components/MyComponent.astro');
 		const barrel = createMockModule('/src/components/index.ts');