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! 😅

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.

I probably should have illustrated the problem better with some examples.

Chris Ferdinandi

@cferdinandi.bsky.social

gomakethings.comHow to dynamically load Web ComponentsOver the last year, I’ve converted all of my code bases over from traditional DOM manipulation or JS-rendered UI to mostly pre-rendered HTML and Web Components. Today, I wanted to quickly show you how...

Oh, this might also be useful for you: gomakethings.com/how-to-dynam...

OK, yeah, this is almost exactly the situation I’m in. And I’ve done something similar in my hugo projects (where I *love* using shortcodes).

What I’m doing is akin to shortcodes, but in pure HTML. So instead of checking which elements needs JS loaded for progressive enhancement in my static site build, I’m just adding a <script src defer> tags to the shortcode templates. Then customElements.apply handles any redundancy.

12/2/25, 8:12 pm0 reposts0 likes

And by "shortcode template" I mean something like a layout partial (an HTML DocumentFragment) that gets included into a layout, server side.

Chris Ferdinandi

@cferdinandi.bsky.social