Post

I'm not sure which phase of web component adoption this is, but this little bit of duct tape has been working wonders for me! 😊 #JavaScript #webdev

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

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.

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

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.

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