store root information in component.$$.root

src/compiler/compile/render_dom/index.ts

@@ -49,8 +49,8 @@ export default function dom(
 
 	if (should_add_css) {
 		body.push(b`
-			function ${add_css}(options) {
-				@append_styles(options, "${component.stylesheet.id.replace('svelte-', '')}", "${styles}");
+			function ${add_css}(target) {
+				@append_styles(target, "${component.stylesheet.id.replace('svelte-', '')}", "${styles}");
 			}
 		`);
 	}

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -355,7 +355,6 @@ export default class EachBlockWrapper extends Wrapper {
 			function ${this.vars.get_each_context}(#ctx, list, i) {
 				const child_ctx = #ctx.slice();
 				${this.context_props}
-				child_ctx.$$root = #ctx.$$root;
 				return child_ctx;
 			}
 		`);

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -186,8 +186,6 @@ export default class InlineComponentWrapper extends Wrapper {
 			}
 		}
 
-		component_opts.properties.push(p`$$root: #ctx.$$root`);
-
 		if (component.compile_options.dev) {
 			// TODO this is a terrible hack, but without it the component
 			// will complain that options.target is missing. This would

src/runtime/internal/Component.ts

@@ -38,6 +38,7 @@ interface T$$ {
 	on_destroy: any[];
 	skip_bound: boolean;
 	on_disconnect: any[];
+	root:Element|ShadowRoot
 }
 
 export function bind(component, name, callback) {
@@ -103,7 +104,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, append_styles, dirty = [-1]) {
 	const parent_component = current_component;
 	set_current_component(component);
 
@@ -128,9 +129,12 @@ export function init(component, options, instance, create_fragment, not_equal, p
 		// everything else
 		callbacks: blank_object(),
 		dirty,
-		skip_bound: false
+		skip_bound: false,
+		root: options.target || parent_component.$$.root
 	};
 
+	append_styles && append_styles($$.root);
+
 	let ready = false;
 
 	$$.ctx = instance
@@ -144,8 +148,6 @@ export function init(component, options, instance, create_fragment, not_equal, p
 		})
 		: [];
 
-	$$.ctx.$$root = options.target || options.$$root;
-
 	$$.update();
 	ready = true;
 	run_all($$.before_update);

src/runtime/internal/await_block.ts

@@ -16,7 +16,6 @@ export function handle_promise(promise, info) {
 		if (key !== undefined) {
 			child_ctx = child_ctx.slice();
 			child_ctx[key] = value;
-			child_ctx.$$root = info.ctx.$$root;
 		}
 
 		const block = type && (info.current = type)(child_ctx);

src/runtime/internal/dom.ts

@@ -113,12 +113,12 @@ function init_hydrate(target: NodeEx) {
 }
 
 export function append_styles(
-	{ target, $$root },
+	target: Node,
 	styleSheetId: string,
 	styles: string,
 	styleId: string = `svelte-${styleSheetId}-style`
 ) {
-	const appendStylesTo = get_root_for_node(target || $$root);
+	const appendStylesTo = get_root_for_node(target);
 
 	if (!appendStylesTo?.querySelector('#' + styleId)) {
 		const style = element('style');

src/runtime/internal/utils.ts

@@ -83,7 +83,6 @@ function get_slot_context(definition, ctx, $$scope, fn) {
 	const context = definition[1] && fn
 		? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
 		: $$scope.ctx;
-	context.$$root = ctx.$$root;
 	return context;
 }