Custom elements using is not recognized as custom elements

[thesmartwon]

I am experiencing #1735 with <canvas is="my-web-component">.

I assume this is because the isCE check (maybe here?) is incorrect. The correct way to check for a custom element is to use the window.customElements registry like so:

const isCE = window.customElements.get(tagName) != undefined;

In the meantime I've worked around it by refactoring my custom element to <my-web-component> instead, but this is not ideal.

[ryansolid]

Yeah... you are right. Every place we check is probably looking for - character. Is it safe to assume all elements with an "is" attribute are custom elements too I wonder. The problem is we need to know this stuff at compile time so there is no checking the runtime registry. Having a compile time registry seems a bit awkward if it can be avoided.

[thesmartwon]

Is it safe to assume all elements with an "is" attribute are custom elements too I wonder.

Yes! MDN reads:

The is global attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element (see Using custom elements for more details).

This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.

This way you do NOT need to polyfill window.customElements and global.customElements.

[ryansolid]

Ok.. well hmm.. that will work as heuristic with the exception of if someone tries to spread it on. Then we wouldn't know at compiler time. I guess that's what it will have to do though. Dynamic elements are created at runtime which is fine but CE impacts how we template clone chunks of nodes. "is" being only spread is an edge case but something to consider.