Ensure stylesheets output for custom elements without shadowDom

src/compile/Component.ts

@@ -168,7 +168,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);
 	}
@@ -317,7 +317,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/compile/render-dom/index.ts

@@ -22,8 +22,6 @@ export default function dom(
 
 	block.has_outro_method = true;
 
-	const should_use_shadow_dom = options.customElement && options.shadowDom !== false;
-
 	// prevent fragment being created twice (#1063)
 	if (options.customElement) block.builders.create.add_line(`this.c = @noop;`);
 
@@ -33,12 +31,13 @@ export default function dom(
 		builder.add_line(`const ${renderer.file_var} = ${JSON.stringify(component.file)};`);
 	}
 
-	const css = component.stylesheet.render(options.filename, !options.customElement);
+
+	const css = component.stylesheet.render(options.filename, !options.shadowDom);
 	const styles = component.stylesheet.has_styles && stringify(options.dev ?
 		`${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */` :
 		css.code, { only_escape_at_symbol: true });
 
-	if (styles && component.compile_options.css !== false && !options.customElement) {
+	if (styles && component.compile_options.css !== false && !options.shadowDom) {
 		builder.add_block(deindent`
 			function @add_css() {
 				var style = @element("style");
@@ -66,7 +65,7 @@ export default function dom(
 	// TODO injecting CSS this way is kinda dirty. Maybe it should be an
 	// explicit opt-in, or something?
 	const should_add_css = (
-		!should_use_shadow_dom &&
+		!options.shadowDom &&
 		component.stylesheet.has_styles &&
 		options.css !== false
 	);
@@ -445,11 +444,12 @@ export default function dom(
 		builder.add_block(deindent`
 			class ${name} extends @SvelteElement {
 				constructor(options) {
-					super(${should_use_shadow_dom ? '' : '{ use_shadow_dom: false }'});
+					super(${options.shadowDom ? '' : '{ use_shadow_dom: false }'});
 
-					${css.code && should_use_shadow_dom && `this.shadowRoot.innerHTML = \`<style>${escape(css.code, { only_escape_at_symbol: true }).replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
+					${css.code && options.shadowDom && `this.shadowRoot.innerHTML = \`<style>${escape(css.code, { only_escape_at_symbol: true }).replace(/\\/g, '\\\\')}${options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}</style>\`;`}
+					${should_add_css && `if (!document.getElementById("${component.stylesheet.id}-style")) @add_css();`}
 
-					@init(this, { target: this${should_use_shadow_dom ? '.shadowRoot' : ''} }, ${definition}, create_fragment, ${not_equal}, ${prop_names});
+					@init(this, { target: this${options.shadowDom ? '.shadowRoot' : ''} }, ${definition}, create_fragment, ${not_equal}, ${prop_names});
 
 					${dev_props_check}
 

src/compile/render-ssr/index.ts

@@ -19,7 +19,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/parse/index.ts

@@ -8,7 +8,7 @@ import error from '../utils/error';
 
 interface ParserOptions {
 	filename?: string;
-	customElement?: boolean;
+	shadowDom?: boolean;
 }
 
 type ParserState = (parser: Parser) => (ParserState | void);
@@ -16,7 +16,7 @@ type ParserState = (parser: Parser) => (ParserState | void);
 export class Parser {
 	readonly template: string;
 	readonly filename?: string;
-	readonly customElement: boolean;
+	readonly shadowDom: boolean;
 
 	index = 0;
 	stack: Array<Node> = [];
@@ -33,7 +33,7 @@ export class Parser {
 
 		this.template = template.replace(/\s+$/, '');
 		this.filename = options.filename;
-		this.customElement = options.customElement;
+		this.shadowDom = options.shadowDom;
 
 		this.html = {
 			start: null,

src/parse/state/tag.ts

@@ -132,7 +132,7 @@ export default function tag(parser: Parser) {
 		? meta_tags.get(name)
 		: (/[A-Z]/.test(name[0]) || name === 'svelte:self' || name === 'svelte:component') ? 'InlineComponent'
 		: name === 'title' && parent_is_head(parser.stack) ? 'Title'
-		: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
+		: name === 'slot' && !parser.shadowDom ? 'Slot' : 'Element';
 
 	const element: Node = {
 		start,

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

@@ -1,6 +1,7 @@
 /* generated by Svelte vX.Y.Z */
 import {
 	SvelteElement,
+	append,
 	detach,
 	element,
 	init,
@@ -9,6 +10,13 @@ import {
 	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;
 
@@ -17,6 +25,7 @@ function create_fragment(ctx) {
 			h1 = element("h1");
 			h1.textContent = "Hello world";
 			this.c = noop;
+			h1.className = "svelte-pbe34";
 		},
 
 		m(target, anchor) {
@@ -38,6 +47,7 @@ function create_fragment(ctx) {
 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, []);