always inject styles when compiling as a custom element

Author: Rich-Harris

.changeset/wise-hairs-pay.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always inject styles when compiling as a custom element

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -451,6 +451,8 @@ export function analyze_component(root, source, options) {
 		}
 	}
 
+	const is_custom_element = !!options.customElementOptions || options.customElement;
+
 	// TODO remove all the ?? stuff, we don't need it now that we're validating the config
 	/** @type {ComponentAnalysis} */
 	const analysis = {
@@ -500,13 +502,13 @@ export function analyze_component(root, source, options) {
 		needs_props: false,
 		event_directive_node: null,
 		uses_event_attributes: false,
-		custom_element: options.customElementOptions ?? options.customElement,
-		inject_styles: options.css === 'injected' || options.customElement,
-		accessors: options.customElement
-			? true
-			: (runes ? false : !!options.accessors) ||
-				// because $set method needs accessors
-				options.compatibility?.componentApi === 4,
+		custom_element: is_custom_element,
+		inject_styles: options.css === 'injected' || is_custom_element,
+		accessors:
+			is_custom_element ||
+			(runes ? false : !!options.accessors) ||
+			// because $set method needs accessors
+			options.compatibility?.componentApi === 4,
 		reactive_statements: new Map(),
 		binding_groups: new Map(),
 		slot_names: new Map(),

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -621,8 +621,9 @@ export function client_component(analysis, options) {
 		);
 	}
 
-	if (analysis.custom_element) {
-		const ce = analysis.custom_element;
+	const ce = options.customElementOptions ?? options.customElement;
+
+	if (ce) {
 		const ce_props = typeof ce === 'boolean' ? {} : ce.props || {};
 
 		/** @type {ESTree.Property[]} */

packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/Thing.svelte

@@ -0,0 +1,9 @@
+<svelte:options customElement={{ tag: 'my-thing' }} />
+
+<h1>hello</h1>
+
+<style>
+	h1 {
+		color: red;
+	}
+</style>

packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/_config.js

@@ -0,0 +1,15 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target }) {
+		const thing = /** @type HTMLElement & { object: { test: true }; } */ (
+			target.querySelector('my-thing')
+		);
+
+		await tick();
+
+		assert.include(thing.shadowRoot?.innerHTML, 'red');
+	}
+});

packages/svelte/tests/runtime-runes/samples/custom-element-injected-styles/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import './Thing.svelte';
+</script>
+
+<my-thing></my-thing>