[WIP] Allow custom elements to be rendered to light dom or shadow dom (open, closed)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/compiler/compile/index.ts

@@ -22,6 +22,7 @@ const valid_options = [
 	'hydratable',
 	'legacy',
 	'customElement',
+	'shadowDom',
 	'tag',
 	'css',
 	'loopGuardTimeout',

src/compiler/compile/render_dom/index.ts

@@ -426,14 +426,19 @@ export default function dom(
 	}
 
 	if (options.customElement) {
+		const lightDom = options.shadowDom === 'none';
 		const declaration = b`
 			class ${name} extends @SvelteElement {
 				constructor(options) {
 					super();
+					
+					${!lightDom && b`
+						this.attachShadow({ mode: '${options.shadowDom}' });
+					`}
 
 					${css.code && b`this.shadowRoot.innerHTML = \`<style>${css.code.replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
 
-					@init(this, { target: this.shadowRoot }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
+					@init(this, { target: ${lightDom ? 'this' : 'this.shadowRoot'} }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
 
 					${dev_props_check}
 

src/compiler/interfaces.ts

@@ -119,6 +119,7 @@ export interface CompileOptions {
 	hydratable?: boolean;
 	legacy?: boolean;
 	customElement?: boolean;
+	shadowDom?: ShadowDomMode;
 	tag?: string;
 	css?: boolean;
 	loopGuardTimeout?: number;
@@ -160,4 +161,8 @@ export interface Var {
 	hoistable?: boolean;
 	subscribable?: boolean;
 	is_reactive_dependency?: boolean;
-}
+}
+
+export type ShadowDomMode = 'none'
+	| 'open'
+	| 'closed'

src/runtime/internal/Component.ts

@@ -166,7 +166,6 @@ if (typeof HTMLElement === 'function') {
 		$$: T$$;
 		constructor() {
 			super();
-			this.attachShadow({ mode: 'open' });
 		}
 
 		connectedCallback() {