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.

[trusktr]

Yeah, I think we can expect spread not to work, like how a tag name is also not part of spread. The expectation that it has to be written in the template just like the tag name would be fine.

Maybe Dynamic needs a special is prop for this case:

return <Dynamic component="canvas" is="my-special-canvas" />

So if it receives both component and is strings, it enables CE treatment.

[ryansolid]

Dynamic is pure runtime so it can't have special treatment. That being said it doesn't clone so I think it is fine. Unless is elements need to be created differently too.