Add option to make usage of shadow dom configurable

src/compiler/compile/Component.ts

@@ -179,7 +179,7 @@ export default class Component {
 
 		this.walk_instance_js_post_template();
 
-		if (!compile_options.customElement) this.stylesheet.reify();
+		if (!compile_options.shadowDom) this.stylesheet.reify();
 
 		this.stylesheet.warn_on_unused_selectors(this);
 	}
@@ -342,7 +342,7 @@ export default class Component {
 
 			add_string(final_chunk);
 
-			css = compile_options.customElement ?
+			css = compile_options.shadowDom ?
 				{ code: null, map: null } :
 				this.stylesheet.render(compile_options.cssOutputFilename, true);
 

src/compiler/compile/index.ts

@@ -22,14 +22,15 @@ const valid_options = [
 	'hydratable',
 	'legacy',
 	'customElement',
+	'shadowDom',
 	'tag',
 	'css',
 	'preserveComments',
 	'preserveWhitespace'
 ];
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {
-	const { name, filename } = options;
+	const { name, filename, shadowDom, customElement } = options;
 
 	Object.keys(options).forEach(key => {
 		if (valid_options.indexOf(key) === -1) {
@@ -54,10 +55,14 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 			toString: () => message,
 		});
 	}
+
+	if (!customElement && shadowDom) {
+		throw new Error(`options.shadowDom cannot be true if options.customElement is false`)
+	}
 }
 
 export default function compile(source: string, options: CompileOptions = {}) {
-	options = assign({ generate: 'dom', dev: false }, options);
+	options = assign({ generate: 'dom', dev: false, shadowDom: options.customElement }, options);
 
 	const stats = new Stats();
 	const warnings = [];

src/compiler/compile/render_ssr/index.ts

@@ -21,7 +21,7 @@ export default function ssr(
 	}, options));
 
 	// TODO concatenate CSS maps
-	const css = options.customElement ?
+	const css = options.shadowDom ?
 		{ code: null, map: null } :
 		component.stylesheet.render(options.filename, true);
 

src/compiler/interfaces.ts

@@ -95,6 +95,7 @@ export interface CompileOptions {
 	hydratable?: boolean;
 	legacy?: boolean;
 	customElement?: boolean;
+	shadowDom?: boolean;
 	tag?: string;
 	css?: boolean;
 

test/custom-elements/index.js

@@ -84,7 +84,7 @@ describe('custom-elements', function() {
 							if (id.endsWith('.svelte')) {
 								const compiled = svelte.compile(code, {
 									customElement: true,
-									dev: config.dev
+									...config
 								});
 
 								compiled.warnings.forEach(w => warnings.push(w));

test/custom-elements/samples/no-shadow-dom-with-slots/AsElement.svelte

@@ -0,0 +1,3 @@
+<svelte:options tag="as-element"/>
+
+<h1><slot/></h1>

test/custom-elements/samples/no-shadow-dom-with-slots/AsImported.svelte

@@ -0,0 +1,3 @@
+<svelte:options tag="as-imported"/>
+
+<h2><slot/></h2>

test/custom-elements/samples/no-shadow-dom-with-slots/_config.js

@@ -0,0 +1,4 @@
+export default {
+	customElement: true,
+	shadowDom: false
+};

test/custom-elements/samples/no-shadow-dom-with-slots/main.svelte

@@ -0,0 +1,9 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+import './AsElement.svelte';
+import AsImported from './AsImported.svelte';
+</script>
+
+<as-element>Hello</as-element>
+<AsImported>world</AsImported>

test/custom-elements/samples/no-shadow-dom-with-slots/test.js

@@ -0,0 +1,13 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	new CustomElement({
+		target
+	});
+
+	assert.equal(target.innerHTML, '<custom-element><as-element><h1>Hello</h1></as-element><as-imported><h2>world</h2></as-imported></custom-element>');
+
+	const el = target.querySelector('custom-element');
+	assert.equal(el.innerText, "Hello world!");
+}

test/custom-elements/samples/no-shadow-dom/_config.js

@@ -0,0 +1,4 @@
+export default {
+	customElement: true,
+	shadowDom: false
+};

test/custom-elements/samples/no-shadow-dom/main.svelte

@@ -0,0 +1,9 @@
+<svelte:options tag="custom-element"/>
+
+<h1>Hello world!</h1>
+
+<style>
+h1 {
+  color: blue;
+}
+</style>

test/custom-elements/samples/no-shadow-dom/test.js

@@ -0,0 +1,17 @@
+import * as assert from 'assert';
+import CustomElement from './main.svelte';
+
+export default function (target) {
+	new CustomElement({
+		target
+	});
+
+	assert.equal(target.innerHTML, '<custom-element><h1 class="svelte-619mm8">Hello world!</h1></custom-element>');
+
+	const el = target.querySelector('custom-element');
+	const h1 = el.querySelector('h1');
+	const { color } = getComputedStyle(h1);
+
+	assert.equal(h1.textContent, 'Hello world!');
+	assert.equal(color, 'rgb(0, 0, 255)');
+}

test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsElement.svelte

@@ -0,0 +1,3 @@
+<svelte:options tag="as-element"/>
+
+<h1><slot/></h1>

test/js/samples/css-custom-element-no-shadow-dom-with-slots/AsImport.svelte

@@ -0,0 +1,3 @@
+<svelte:options tag="as-import"/>
+
+<h2><slot/></h2>

test/js/samples/css-custom-element-no-shadow-dom-with-slots/_config.js

@@ -0,0 +1,6 @@
+export default {
+	options: {
+		customElement: true,
+		shadowDom: false
+	}
+};

test/js/samples/css-custom-element-no-shadow-dom-with-slots/expected.js

@@ -0,0 +1,109 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteElement,
+	detach,
+	element,
+	init,
+	insert,
+	mount_component,
+	noop,
+	safe_not_equal,
+	space,
+	text
+} from "svelte/internal";
+import "./AsElement.svelte";
+import AsImport from "./AsImport.svelte";
+
+// (9:0) <AsImport>
+function create_default_slot(ctx) {
+	var t;
+
+	return {
+		c() {
+			t = text("world");
+		},
+
+		m(target, anchor) {
+			insert(target, t, anchor);
+		},
+
+		d(detaching) {
+			if (detaching) {
+				detach(t);
+			}
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	var as_element, t_1, current;
+
+	var asimport = new AsImport({
+		props: {
+		$$slots: { default: [create_default_slot] },
+		$$scope: { ctx }
+	}
+	});
+
+	return {
+		c() {
+			as_element = element("as-element");
+			as_element.textContent = "hello";
+			t_1 = space();
+			asimport.$$.fragment.c();
+			this.c = noop;
+		},
+
+		m(target, anchor) {
+			insert(target, as_element, anchor);
+			insert(target, t_1, anchor);
+			mount_component(asimport, target, anchor);
+			current = true;
+		},
+
+		p(changed, ctx) {
+			var asimport_changes = {};
+			if (changed.$$scope) asimport_changes.$$scope = { changed, ctx };
+			asimport.$set(asimport_changes);
+		},
+
+		i(local) {
+			if (current) return;
+			asimport.$$.fragment.i(local);
+
+			current = true;
+		},
+
+		o(local) {
+			asimport.$$.fragment.o(local);
+			current = false;
+		},
+
+		d(detaching) {
+			if (detaching) {
+				detach(as_element);
+				detach(t_1);
+			}
+
+			asimport.$destroy(detaching);
+		}
+	};
+}
+
+class Component extends SvelteElement {
+	constructor(options) {
+		super({ use_shadow_dom: false });
+
+		init(this, { target: this }, null, create_fragment, safe_not_equal, []);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+		}
+	}
+}
+
+customElements.define("custom-element", Component);
+
+export default Component;

test/js/samples/css-custom-element-no-shadow-dom-with-slots/input.svelte

@@ -0,0 +1,9 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+import "./AsElement.svelte";
+import AsImport from "./AsImport.svelte";
+</script>
+
+<as-element>hello</as-element>
+<AsImport>world</AsImport>

test/js/samples/css-custom-element-no-shadow-dom/_config.js

@@ -0,0 +1,6 @@
+export default {
+	options: {
+		customElement: true,
+		shadowDom: false
+	}
+};

test/js/samples/css-custom-element-no-shadow-dom/expected.js

@@ -0,0 +1,64 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteElement,
+	append,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal
+} from "svelte/internal";
+
+function add_css() {
+	var style = element("style");
+	style.id = 'svelte-pbe34-style';
+	style.textContent = "h1.svelte-pbe34{color:blue}";
+	append(document.head, style);
+}
+
+function create_fragment(ctx) {
+	var h1;
+
+	return {
+		c() {
+			h1 = element("h1");
+			h1.textContent = "Hello world";
+			this.c = noop;
+			h1.className = "svelte-pbe34";
+		},
+
+		m(target, anchor) {
+			insert(target, h1, anchor);
+		},
+
+		p: noop,
+		i: noop,
+		o: noop,
+
+		d(detaching) {
+			if (detaching) {
+				detach(h1);
+			}
+		}
+	};
+}
+
+class Component extends SvelteElement {
+	constructor(options) {
+		super({ use_shadow_dom: false });
+		if (!document.getElementById("svelte-pbe34-style")) add_css();
+
+		init(this, { target: this }, null, create_fragment, safe_not_equal, []);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+		}
+	}
+}
+
+customElements.define("custom-element", Component);
+
+export default Component;

test/js/samples/css-custom-element-no-shadow-dom/input.svelte

@@ -0,0 +1,9 @@
+<svelte:options tag="custom-element"/>
+
+<h1>Hello world</h1>
+
+<style>
+h1 { 
+  color: blue;
+}
+</style>