implement 'stylesTarget'

src/compiler/compile/render_dom/index.ts

@@ -49,11 +49,8 @@ export default function dom(
 
 	if (should_add_css) {
 		body.push(b`
-			function ${add_css}() {
-				var style = @element("style");
-				style.id = "${component.stylesheet.id}-style";
-				style.textContent = "${styles}";
-				@append(@_document.head, style);
+			function ${add_css}(options) {
+				@append_styles(options, "${component.stylesheet.id.replace('svelte-', '')}", "${styles}");
 			}
 		`);
 	}

src/runtime/internal/Component.ts

@@ -38,6 +38,7 @@ interface T$$ {
 	on_destroy: any[];
 	skip_bound: boolean;
 	on_disconnect: any[];
+	stylesTarget?: HTMLElement|ShadowRoot;
 }
 
 export function bind(component, name, callback) {

src/runtime/internal/dev.ts

@@ -140,7 +140,15 @@ export class SvelteComponentDev extends SvelteComponent {
 	 */
 	$$slot_def: any;
 
-	constructor(options: IComponentOptions) {
+	constructor(options: {
+		target: Element|ShadowRoot;
+		stylesTarget: Element|ShadowRoot;
+		anchor?: Element;
+		props?: Props;
+		hydrate?: boolean;
+		intro?: boolean;
+		$$inline?: boolean;
+    }) {
 		if (!options || (!options.target && !options.$$inline)) {
 			throw new Error("'target' is a required option");
 		}
@@ -232,7 +240,15 @@ export class SvelteComponentTyped<
 	 */
 	$$slot_def: Slots;
 
-	constructor(options: IComponentOptions<Props>) {
+	constructor(options: {
+		target: Element|ShadowRoot;
+		stylesTarget: Element|ShadowRoot;
+		anchor?: Element;
+		props?: Props;
+		hydrate?: boolean;
+		intro?: boolean;
+		$$inline?: boolean;
+    }) {
 		super(options);
 	}
 }

src/runtime/internal/dom.ts

@@ -110,6 +110,26 @@ function init_hydrate(target: NodeEx) {
 		const anchor = j < lis.length ? lis[j] : null;
 		target.insertBefore(toMove[i], anchor);
 	}
+let appendStylesTo = document.head;
+
+export function append_styles(
+	{ stylesTarget },
+	styleSheetId: string,
+	styles: string,
+	styleId: string = `svelte-${styleSheetId}-style`
+) {
+	if (stylesTarget) appendStylesTo = stylesTarget;
+
+	if (!appendStylesTo.querySelector('#' + styleId)) {
+		const style = element('style');
+		style.id = styleId;
+		style.textContent = styles;
+		append(appendStylesTo, style);
+	}
+}
+
+export function append_empty_stylesheet() {
+	return appendStylesTo.appendChild(element('style') as HTMLStyleElement);
 }
 
 export function append(target: NodeEx, node: NodeEx) {

src/runtime/internal/style_manager.ts

@@ -1,4 +1,4 @@
-import { element } from './dom';
+import { append_empty_stylesheet } from './dom';
 import { raf } from './environment';
 
 interface ExtendedDoc extends Document {
@@ -31,7 +31,7 @@ export function create_rule(node: Element & ElementCSSInlineStyle, a: number, b:
 	const name = `__svelte_${hash(rule)}_${uid}`;
 	const doc = node.ownerDocument as ExtendedDoc;
 	active_docs.add(doc);
-	const stylesheet = doc.__svelte_stylesheet || (doc.__svelte_stylesheet = doc.head.appendChild(element('style') as HTMLStyleElement).sheet as CSSStyleSheet);
+	const stylesheet = doc.__svelte_stylesheet || (doc.__svelte_stylesheet = append_empty_stylesheet().sheet as CSSStyleSheet);
 	const current_rules = doc.__svelte_rules || (doc.__svelte_rules = {});
 
 	if (!current_rules[name]) {