diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index 44155f8464..fcc7e3d4f5 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -525,13 +525,21 @@ export default function dom(
 		if (uses_slots) {
 			init_props = x`{ ...${init_props}, $$slots: @get_custom_elements_slots(this) }`;
 		}
-
+		let buildCss = `${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(regex_backslashes, '\\\\')}${css_sourcemap_enabled && options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}`
+		if (options.constructableStylesheets) {
+			buildCss = `
+			const sheet = new CSSStyleSheet();
+			sheet.replaceSync('${css.code}')
+
+			this.shadow.adoptedStyleSheets = [sheet];
+			`
+		}
 		const declaration = b`
 			class ${name} extends @SvelteElement {
 				constructor(options) {
 					super();
 
-					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(regex_backslashes, '\\\\')}${css_sourcemap_enabled && options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
+					${buildCss}
 
 					@init(this, { target: this.shadowRoot, props: ${init_props}, customElement: true }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, null, ${dirty});
 
diff --git a/src/compiler/interfaces.ts b/src/compiler/interfaces.ts
index eb2cc336ed..780bb09de6 100644
--- a/src/compiler/interfaces.ts
+++ b/src/compiler/interfaces.ts
@@ -186,6 +186,8 @@ export interface CompileOptions {
 
 	preserveComments?: boolean;
 	preserveWhitespace?: boolean;
+
+	constructableStylesheets?: boolean
 }
 
 export interface ParserOptions {