The DOM needs re-sync'd when a previously-unknown custom element is defined

[dead-claudia]

Description

• Update Mithril's IR with the updated DOM references when a custom element is defined. (Difficult)
• Add an onelementdefined hook called after the element is defined. (Easy)
• Trigger a redraw when an element Mithril's aware of is defined. (Easy)

Why

Currently, when Mithril renders a custom element that's defined after the render, the DOM gets upgraded, but Mithril's IR doesn't. This basically means we only have limited custom element support.

Users would no longer have to be as careful with custom elements, and could render their page while asynchronously loading the custom element code.

Possible Implementation & Open Questions

I'd use a mixture of customElements.get + customElements.whenDefined to detect when a custom element is defined, and I'd use a set of queues with current siblings and similar to track what I need to update Mithril's internal representation.

Note that this is never a concern on IE, since we could just detect customElements existence and disable the functionality for them.

Is this something you're interested in working on?

Yes.

---

This is milestoned for v2.0 mainly because it's mildly breaking.

[dead-claudia]

So from experimentation, here's how we can tell if an element is upgraded:

• For autonomous custom elements like m("x-whatever"):

  ar requiresUpgrade = vnode.dom.constructor !== window.customElements.get(vnode.tag)
  

• For custom elements extending existing ones like m("button[is=x-whatever]"):

  ar requiresUpgrade = vnode.dom.constructor !== window.customElements.get(vnode.attrs.is)
  

This is just a note to self for later or for whoever implements this.

Edit: Fix bug in detection