[Go Make Things] The role of Web Components in your site or app

By rahmat hidayat

Monday, September 30, 2024

​ Last week, Ryan Carniato, the guy who made SolidJS, wrote an article about how Web Components are not the future. The nicest thing I can say about it is that he's just completely, utterly wrong. His article really boiled down to "Web Components are hard for me as a library author to implement, and I don't like that." Rather than do a deep analysis on it, I'll instead point you to Cory LaViska's rebuttal, and Nolan Lawson's follow-up. They both responded in far more thorough and thoughtful ways than I have the time for at the moment. And if you want a pithy response, I think Jeremy Keith did that better than I could have, too… Comparing web components to React is like comparing a good bicycle with a cybertruck. They do very different things, and they're used by different people with very, very different mindsets. What I actually wanted to talk about today was the role of Web Components in your site or app. Early on, Google positioned Web Components as a native replacement for stuff like React. And as Jeremy's quote above alludes… they're not! They do very different things, very differently. Web Components are not, in my opinion, good at building an entire UI. In particular, I think patterns like what you see in Shoelace (now being built out as Web Awesome) are an anti-pattern, where this… <sl-button>Button</sl-button> Renders this… <sl-button> <!-- #shadow-dom --> <button part="base" class="button button--default button--medium button--standard button--has-label" type="button" title="" name="" value="" role="button" aria-disabled="false" tabindex="0"> <slot name="prefix" part="prefix" class="button__prefix"></slot> <slot part="label" class="button__label">Button</slot> <slot name="suffix" part="suffix" class="button__suffix"></slot> </button> <!-- /#shadow-dom --> </sl-button> For starters, you now have a basic HTML element that only renders with JS, but that JS is not adding any interactivity to the element. It's only purpose is to hide how the sausage is made and obfuscate all of the classes and nested HTML that gets added. This is a very React-like approach to Web Components. And frankly, state-based UI libraries do it better. Where Web Components really shine is when you want to add interactivity to or enhance existing DOM nodes. Specifically, anything that you could build with jQuery or vanilla JS DOM manipulation, Web Components make easier. One of my favorite examples is a taking a collection of headings and content, like this… <accordion-group headings="h2"> <h2>Yo, ho ho!</h2> <div>Yo, ho ho and a bottle of rum!</div> <h2>Ahoy, there!</h2> <div>Ahoy there, matey!</div> </accordion-group> And progressively enhancing it into an accordion component, with the appropriate event listeners, ARIA attributes, and so on. You could do the same thing without it, but Web Components make it easier. I have a bunch of examples and an entire course on how to build Web Components like this over at the Lean Web Club. In my mind, a good site or app design system is mostly HTML and CSS, with Web Components for progressively layering in interactivity. 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

Share :

Facebook Twitter Google+