- From: Ryosuke Niwa <notifications@github.com>
- Date: Wed, 20 Nov 2024 17:16:58 -0800
- To: WICG/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <WICG/webcomponents/issues/1078/2489865771@github.com>
Okay, so it's clear that we want to use the scoped custom element registry in the case of setting innerHTML to an element in an element newly created for a scoped custom element registry: e.g. ```js function createConnectedShadowTree(registry) { const host = document.createElement('div'); const shadowRoot = host.attachShadow({mode: 'closed', registry}); document.body.appendChild(host); return shadowRoot; } const registry = new CustomElementRegistry; class SomeElement extends HTMLElement { }; registry.define('some-element', SomeElement); class OtherElement extends HTMLElement { }; registry.define('other-element', OtherElement); const shadowRoot = createConnectedShadowTree(registry); const someElement = shadowRoot.createElement('some-element'); someElement.innerHTML = '<other-element></other-element>'; someElement.querySelector('other-element') instanceof OtherElement; // This should evaluate to true. ``` But what happens when such an element gets inserted into another shadow tree with a different scoped registry? Or what happens if the same element gets removed from the shadow tree? ```js class OtherElement1 extends HTMLElement { }; customElements.define('other-element', OtherElement1); const registry1 = new CustomElementRegistry; class SomeElement extends HTMLElement { }; registry1.define('some-element', SomeElement); class OtherElement2 extends HTMLElement { }; registry1.define('other-element', OtherElement2); const registry2 = new CustomElementRegistry; class OtherElement3 extends HTMLElement { }; registry2.define('other-element', OtherElement3); const shadowRoot1 = createConnectedShadowTree(registry1); const shadowRoot2 = createConnectedShadowTree(registry2); const someElement = shadowRoot1.createElement('some-element'); someElement.innerHTML = '<other-element></other-element>'; someElement.querySelector('other-element') instanceof OtherElement2; // This should evaluate to true. shadowRoot2.appendChild(someElement); someElement.innerHTML = '<other-element></other-element>'; someElement.querySelector('other-element') instanceof OtherElement1; // This should evaluate to true. someElement.remove(); someElement.innerHTML = '<other-element></other-element>'; someElement.querySelector('other-element') instanceof OtherElement1; // Should this evaluate to true? ``` -- Reply to this email directly or view it on GitHub: https://github.com/WICG/webcomponents/issues/1078#issuecomment-2489865771 You are receiving this because you are subscribed to this thread. Message ID: <WICG/webcomponents/issues/1078/2489865771@github.com>
Received on Thursday, 21 November 2024 01:17:02 UTC