#3940 add option to append styles on an element other than document.head

src/compiler/compile/render_dom/index.ts

@@ -44,11 +44,14 @@ export default function dom(
 
 	if (should_add_css) {
 		body.push(b`
-			function ${add_css}() {
+			function ${add_css}(customStyleTag) {
+				const styleId = "${component.stylesheet.id}-style"
+				const appendTo = customStyleTag || @_document.head
+				if (appendTo.querySelector(styleId)) return
 				var style = @element("style");
-				style.id = "${component.stylesheet.id}-style";
+				style.id = styleId;
 				style.textContent = "${styles}";
-				@append(@_document.head, style);
+				@append(appendTo, style);
 			}
 		`);
 	}
@@ -474,7 +477,7 @@ export default function dom(
 
 					${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: this.shadowRoot }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, null, ${dirty});
 
 					${dev_props_check}
 
@@ -525,8 +528,7 @@ export default function dom(
 			class ${name} extends ${superclass} {
 				constructor(options) {
 					super(${options.dev && 'options'});
-					${should_add_css && b`if (!@_document.getElementById("${component.stylesheet.id}-style")) ${add_css}();`}
-					@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty});
+					@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${should_add_css ? add_css : null}, ${dirty});
 					${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
 
 					${dev_props_check}

src/runtime/internal/Component.ts

@@ -34,6 +34,7 @@ interface T$$ {
 	on_mount: any[];
 	on_destroy: any[];
 	skip_bound: boolean;
+	customStyleTag: HTMLElement;
 }
 
 export function bind(component, name, callback) {
@@ -96,7 +97,7 @@ function make_dirty(component, i) {
 	component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
 }
 
-export function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
+export function init(component, options, instance, create_fragment, not_equal, props, add_css, dirty = [-1]) {
 	const parent_component = current_component;
 	set_current_component(component);
 
@@ -106,6 +107,8 @@ export function init(component, options, instance, create_fragment, not_equal, p
 		fragment: null,
 		ctx: null,
 
+		customStyleTag: options.customStyleTag || parent_component && parent_component.$$.customStyleTag,
+
 		// state
 		props,
 		update: noop,
@@ -127,6 +130,8 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 	let ready = false;
 
+	add_css && add_css($$.customStyleTag);
+
 	$$.ctx = instance
 		? instance(component, prop_values, (i, ret, ...rest) => {
 			const value = rest.length ? rest[0] : ret;