From d4ad191adbdba7ecc9d88926d26030616539ff93 Mon Sep 17 00:00:00 2001 From: Joerg Sonnenberger Date: Wed, 29 Dec 2021 05:52:39 +0100 Subject: [PATCH 1/2] [PoC] Fix context API for web components When nesting web components, the parent component link is currently not set up correctly. With this change, every parent node will be checked for having the SvelteElement constructor in its prototype chain. This can likely be optimized further by checking for the $$ component first. --- src/runtime/internal/Component.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 3e4801054757..b54b81f24840 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -104,8 +104,24 @@ function make_dirty(component, i) { component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31)); } -export function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) { - const parent_component = current_component; +function is_svelte_element(component) { + while (component) { + if (component.constructor === SvelteElement) + return true; + component = Object.getPrototypeOf(component); + } + return false; +} + +function find_containing_component(component) { + while (component && !is_svelte_element(component)) { + component = component.parentNode; + } + return component; +} + +function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) { + const parent_component = options.customElement ? find_containing_component(component.parentNode) : current_component; set_current_component(component); const $$: T$$ = component.$$ = { From e5db344dd0dcf0330c2eea8c5e4bfcacb8a62f26 Mon Sep 17 00:00:00 2001 From: Joerg Sonnenberger Date: Wed, 29 Dec 2021 05:55:12 +0100 Subject: [PATCH 2/2] Update Component.ts --- src/runtime/internal/Component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index b54b81f24840..c7695ebf4ca2 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -120,7 +120,7 @@ function find_containing_component(component) { return component; } -function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) { +export function init(component, options, instance, create_fragment, not_equal, props, append_styles, dirty = [-1]) { const parent_component = options.customElement ? find_containing_component(component.parentNode) : current_component; set_current_component(component);