Re: [WICG/webcomponents] [scoped-registries] Finding a definition for disconnected elements (Issue #1040)

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:

```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/1040#issuecomment-2489878976
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1040/2489878976@github.com>