diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 22eacde32b..050b23abc3 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -45,7 +45,7 @@ export default function dom(
 	if (should_add_css) {
 		body.push(b`
 			function ${add_css}(customStyleTag) {
-				@appendStyleIfNotPresent(customStyleTag, "${component.stylesheet.id}", "${styles}");
+				@appendStyleIfNotPresent(customStyleTag, "${component.stylesheet.id.replace('svelte-', '')}", "${styles}");
 			}
 		`);
 	}
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index ed665427d0..af35105b11 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -4,7 +4,7 @@ export function appendStyleIfNotPresent(
 	target: Element = document.head,
 	styleSheetId: string,
 	styles: string,
-	styleId:string = styleSheetId + '-style') {
+	styleId:string = `svelte-${styleSheetId}-style`) {
 	if (!target.querySelector('#' + styleId)) {
 		const style = element('style');
 		style.id = styleId;