This content originally appeared on Go Make Things and was authored by Go Make Things
Over the weekend, Remy Sharp asked…
Are we at all worried, or even wary, of web component name collisions?
The concern here is that if you have a custom element named <toggle-tabs>, and then important another Web Component that also uses that same custom element name, you’ve now introduced a collision.
In the ES import-based JavaScript world, having two functions with the same name isn’t that big of a deal because…
- They’re scoped to the importing module.
- You can easily rename them.
- Most compilers catch naming collisions and let you know.
Nathan Knowler suggested that Web Component authors could export just the Web Component class, without the customElements.define().
Users could then define the custom element to use for themselves…
import ToggleTabs from './path/to/toggle-tabs.js';
customElements.define('toggle-tabs', ToggleTabs);
From my perspective, I don’t think naming collisions are a concern.
Web Components are HTML-driven, and specifically focused on DOM manipulation. If you have two custom elements with the same name, you’re doing it wrong.
I also think user-defined custom elements miss the mark on what makes Web Components so great.
Because again, Web Components are HTML-driven. Being able to drop a JS file into my site and then do everything via HTML is what makes them so great. The second I have to import something, define my own custom element, and compile it back out, the value of using a Web Component erodes heavily.
It’s a really good solution to a problem that I personally don’t think really exists.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2024-10-07T14:30:00+00:00) User-defined Web Components. Retrieved from https://www.scien.cx/2024/10/07/user-defined-web-components/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.