[Go Make Things] User-defined Web Components

Monday, October 7, 2024

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.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Ad/iklan :