search

solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://solidjs.com
MIT License
31.62k stars 887 forks source link

Custom elements using `is` not recognized as custom elements #2122

Open thesmartwon opened 2 months ago

thesmartwon commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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.