Post

Thanks to @adactio.com, @jakelazaroff.com, and @cferdinandi.bsky.social for your many words on the topic of HTML Web Components. Please save me if this is a horrible idea! 😅

12/2/25, 7:18 pm0 reposts0 likes

Jake Lazaroff

@jakelazaroff.com

general advice is to not modify the prototypes of third-party code and i’m not sure what the first line of the function gets you. but i think wrapping customElements.define like this is fine!

That first line just checks to make sure the component argument is a JS class. And yeah, I think this is maybe the first time I’ve ever extended a third-party object in this way. But it was such a small little hack I didn’t even give general "best practices" a very thorough consideration. 🤪

Chris Ferdinandi

@cferdinandi.bsky.social

gomakethings.comUser-defined Web ComponentsOver 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 importa...

Last year, Nathan Fowler suggested user defined Web Components, like this: gomakethings.com/user-defined... If collisions are happening a lot for you, that suggests that your naming conventions aren't specific enough. I'd personally address that first.

The challenge I’m having isn’t multiple components with the same name. I’m (lazily) importing the same component more than once.

Why? ¯\_(ツ)_/¯ I’ve started using custom elements (instead of <div> soup), even when no JS is needed. Then I’m adding a <script src> tag when I want to progressively enhance the element with JS. Then in some cases, my templating system adds multiple instances of a custom element to a page.