Web Components: an introduction, and two different approaches

I watched three really interesting talks/panels on the subject of Web Components recently and I want to share them for people who want to know more about the subject but aren't really sure of where to start:

Although I found the videos in that order, it makes more sense to watch in the order I discuss them, below:

The introduction, with Dave Rupert

Dave is someone who I somehow have seen around the internets for a while but I don't think I had really interacted with or paid enough attention to until I stumbled upon his comments in the panel video. And I said to myself: "hey, this guy is being so helpful and knowledgeable, what else does he do?..."

Then I found this Creating Web Components with Dave Rupert conversation with Kewin Powell, where he very clearly explains how the several technologies that underpin "Web Components" work together. It is a really good introduction.

There's plenty of good insights, snippets and great examples to look at shared along the conversation. Worth the time watching it to the end.

My favourite thing to remember from the video is "if you write it, you can style it. You don't write it, you can't style it", to understand what the scope of the CSS in custom elements using Shadow DOM is. I promise that if you watch the talk, it will all make sense!

My second favourite thing is his encouragement to try using existing web components before jumping to build your own. Maybe you realise that they work well for you! And don't need to reinvent the wheel (again).

My third favourite idea is to wrap existing, functional HTML elements with your custom elements to augment the existing elements, as this way you still guarantee the user gets access to some content even if there is a problem with your custom element (or even, if the user's browser doesn't do custom elements). For example, wrap plain <img> elements with your <slide-deck> element. Or wrapping an <audio> tag with <podcast-player> so you provide extra controls that let you seek by 15 seconds or change the playback speed.

In any case, knowing the theory about how to build Web Components is one thing, and applying it in reality is another different thing. That's why I found the two different approaches presented in the following videos to be intensely thought-provoking:

Approach 1: extremely simplified, with Zach Leatherman

In "Web Components w/special guest Zach Leatherman" from the Winging It show, Zach Leatherman discusses his approach to building Web Components, amongst many other things, with Miriam Suzanne and James Stuckey Weber.

From all the really interesting conversation, the bit that stuck most in my mind was Zach's focus on building the simplest components that he can get away with, which increases maintainability and thus ensures that they will be working for the longest amount of time, or should be easier to adapt if changes are needed in the future.

So if he can not use dependencies, an build directly on top of the "raw" Web APIs, he will. For example, he discusses how his fundraising status component directly extends HTMLElement to provide a custom element, rather than using a helper like Lit to define the component. It also uses native web platform features such as the Intl API to render currencies at browser level. So you can simply import the JavaScript file that defines the component in your code, either with an import in JavaScript or with a <script> tag in the HTML file, and you'd be good to go.

His personal site has more examples of web components, and other good stuff!

Approach 2: extremely modularised, with Jan Miksovsky

I found Jan Miksovsky's Delivering universal UI patterns as Web Components talk very different from the usual presentations that are often a touch too self-congratulatory and conveniently avoid looking at the problems or challenges in the face. In contrast, his measured analysis was very refreshing and his proposal looked so obvious, it was evident it had taken a lot of thought to come to that conclusion! And also, it's a very different philosophy from Zach's, so that makes for good food for thought.

In summary, he observes the current state of the art in what it comes to front-end development, makes a thoughtful comparison between what we think a window is versus what we actually expect from a modern window, extrapolates to modern (offsite specialised preparation, on site assembly) vs traditional (all on-site) construction methodologies, then suggests that selective specialisation is what allows site builders to add differentiation where it actually matters, and provide a higher degree of quality builds consistently. In the web platform, this would ensure that users are not irritated by small annoyances that make the web platform less user friendly as the result of thousands of micro-hostilities that manifest when things do not behave the way users expect them to behave.

He then high-level explains how to implement Web Components using an extremely modularised composition of behaviours, which if you think about that, makes a lot of sense. Eg. a behaviour would be to show a list of content. Another would be to highlight just one item on a bigger stage. Or slide items with mouse input, etc.

So he uses mixins to add those behaviours to classes, where each mixin is a function that takes in a class and returns another class with additional behavior "mixed in". Each component is built by creating a final class that is made of a lot of very specialised, but "abstract" classes, with only the end result being a concrete class you can instantiate.

A metaphor that has stayed with me from my uni times is: you make an onion by wrapping multiple layers around a core, and then make instances of such onion.

This is also the way that Elix components are built, so if you're curious about how they work, this video is a great introduction.

It's quite striking that the talk was recorded in 2019, which basically makes it "ancient" in "JS framework times", but because he was talking about web standards which were pretty much finalised and agreed (if not even already available) at the time, and general architectural principles, this talk has aged really well and the described principles are still perfectly applicable.

Enjoy watching and learning!