Re: [w3c/webcomponents] [idea] Allow custom element naming on a per-shadow-root basis. (#488)

OK @Jamesernator I think you have my attention and I like your idea.

There is already a `CustomElementRegistry` class exposed so I guess having multiple instances provided by the platform shouldn't be too difficult.

Each instance should be aware of its parent registry 'cause shadows can be in shadows so a bottom up lookup can be performed.

We've got the scoped issue "solved", we need to fix the creation ambiguity.

Since we're moving from global to localized, and since the `document.createElement` has been already hijacked in various way,  I wonder how difficult would it be to confine the element creation through the `customElements` instance itself.

That is: `customElements.create('my-element')` with room for an optional second argument as `object` to learn from the past and not repeat same awkward situation we have with `document.createElement`.

So now we have localized ability and zero creation ambiguity, yet we miss one major issue I've previously raised: what happens to a node created and upgraded in a precise shadow, once it lands in another part of the document?

```js
class SubEl extends HTMLElement {
  connectedCallback() {
    this.textContent =
      `${this.parentNode.nodeName} > ${this.nodeName}`;
  }
}
// for demo sake, we define it globally
customElements.define('s-el', SubEl);

const ParentEl = (() => {
  const shadows = new WeakMap;
  return class ParentEl extends HTMLElement {
    constructor() {
      const sd = super().attachShadow({mode: 'closed'});
      shadows.set(this, sd);
      sd.appendChild(new SubEl);
      this.addEventListener('click', this, {once: true});
    }
    onclick(e) {
      e.preventDefault();
      const sd = shadows.get(this);
      this.ownerDocument.body.appendChild(sd.firstChild);
      console.log(sd.childNodes);
    }
    handleEvent(e) {
      this['on' + e.type](e);
    }
  };
})();
// for demo sake, we define it globally
customElements.define('p-el', ParentEl);

document.body.innerHTML = '<p-el></p-el>';
```

Now, [if you click](https://codepen.io/WebReflection/pen/mqOMvm?editors=0010) on that node you'll see a `BODY > S-EL` instead of `#document-fragment > S-EL`.

In a situation where `ParentEl` instance `shadowRoot` registers its own `S-EL` and that node is passed to the document body where there was another `S-EL`, what is expected/desired behavior?

IMO that should throw an _Illegal DOM operation_ or something similar but it's a concern we eventually need to address and/or explain to developers.



-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/488#issuecomment-342798931