get styles target from target instead of its own option

src/runtime/internal/Component.ts

@@ -38,7 +38,6 @@ 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

@@ -142,7 +142,6 @@ export class SvelteComponentDev extends SvelteComponent {
 
 	constructor(options: {
 		target: Element|ShadowRoot;
-		stylesTarget: Element|ShadowRoot;
 		anchor?: Element;
 		props?: Props;
 		hydrate?: boolean;
@@ -242,7 +241,6 @@ export class SvelteComponentTyped<
 
 	constructor(options: {
 		target: Element|ShadowRoot;
-		stylesTarget: Element|ShadowRoot;
 		anchor?: Element;
 		props?: Props;
 		hydrate?: boolean;

src/runtime/internal/dom.ts

@@ -110,15 +110,15 @@ function init_hydrate(target: NodeEx) {
 		const anchor = j < lis.length ? lis[j] : null;
 		target.insertBefore(toMove[i], anchor);
 	}
-let appendStylesTo = document.head;
+let appendStylesTo: Element;
 
 export function append_styles(
-	{ stylesTarget },
+	{ target },
 	styleSheetId: string,
 	styles: string,
 	styleId: string = `svelte-${styleSheetId}-style`
 ) {
-	if (stylesTarget) appendStylesTo = stylesTarget;
+	if (target) appendStylesTo = get_root_for_node(target);
 
 	if (!appendStylesTo.querySelector('#' + styleId)) {
 		const style = element('style');
@@ -128,6 +128,11 @@ export function append_styles(
 	}
 }
 
+function get_root_for_node(node: Node) {
+	const root = (node.getRootNode ? node.getRootNode() : node.ownerDocument); // check for getRootNode because IE is still supported
+	return ((root as ShadowRoot).host ? root : (root as Document).head) as Element;
+}
+
 export function append_empty_stylesheet() {
 	return appendStylesTo.appendChild(element('style') as HTMLStyleElement);
 }