feedback

Author: trueadm

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

@@ -380,7 +380,9 @@ export function client_component(analysis, options) {
 		state.hoisted.push(b.const('$$css', b.object([b.init('hash', hash), b.init('code', code)])));
 
 		component_block.body.unshift(
-			b.stmt(b.call('$.append_styles', b.id('$$anchor'), b.id('$$css')))
+			b.stmt(
+				b.call('$.append_styles', b.id('$$anchor'), b.id('$$css'), b.literal(options.customElement))
+			)
 		);
 	}
 

packages/svelte/src/internal/client/dom/css.js

@@ -1,10 +1,20 @@
+import { DEV } from 'esm-env';
 import { queue_micro_task } from './task.js';
 
+var seen = new Set();
+
 /**
  * @param {Node} anchor
  * @param {{ hash: string, code: string }} css
+ * @param {boolean} is_custom_element
  */
-export function append_styles(anchor, css) {
+export function append_styles(anchor, css, is_custom_element) {
+	// in dev, always check the DOM, so that styles can be replaced with HMR
+	if (!DEV && !is_custom_element) {
+		if (seen.has(css)) return;
+		seen.add(css);
+	}
+
 	// Use `queue_micro_task` to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results
 	queue_micro_task(() => {
 		var root = anchor.getRootNode();