My approach to HTML web components
Tags: html, webcomponents, progressive, enhancement
Published: 2024-06-10 13:31:07

---
title: My approach to HTML web components
published: true
date: 2024-04-29 15:37:36 UTC
tags: html,webcomponents,progressive,enhancement
canonical_url: https://adactio.com/journal/21078
---

I’ve been deep-diving into [HTML web components](https://adactio.com/journal/20618) over the past few weeks. I decided to refactor the JavaScript on [The Session](https://thesession.org/) to use custom elements wherever it made sense.

I really enjoyed doing this, even though the end result for users is exactly the same as before. This was one of those refactors that was for me, and also for future me. The front-end codebase looks a lot more understandable and therefore maintainable.

Most of the JavaScript on [The Session](https://thesession.org/) is good ol’ DOM scripting. Listen for events; when an event happens, make some update to some element. It’s the kind of stuff we might have used jQuery for in the past.

[Chris](https://gomakethings.com/) invoked [Betteridge’s law of headlines](https://en.wikipedia.org/wiki/Betteridge%27s_law_of_headlines) recently by asking [<cite>Will Web Components replace React and Vue?</cite>](https://gomakethings.com/will-web-components-replace-react-and-vue/) I agree with his assessment. The reactivity you get with full-on frameworks isn’t something that web components offer. But I do think web components can replace jQuery and other approaches to scripting the DOM.

I’ve written about my preferred way to do DOM scripting: [`element.target.closest`](https://adactio.com/journal/20551). One of the advantages to that approach is that even if the DOM gets updated—perhaps via Ajax—the event listening will still work.

Well, this is _exactly_ the kind of thing that custom elements take care of for you. The `connectedCallback` method gets fired whenever an instance of the custom element is added to the document, regardless of whether that’s in the initial page load or later in an Ajax update.

So my client-side scripting style has updated over time:

1. Adding event handlers directly to elements.
2. Adding event handlers to the document and using `event.target.closest`.
3. Wrapping elements in a web component that handles the event listening.

None of these progressions were particularly ground-breaking or allowed me to do anything I couldn’t do previously. But each progression improved the resilience and maintainability of my code.

Like Chris, I’m using web components to progressively enhance what’s already in the markup. In fact, looking at the code that Chris is sharing, I think we may be writing some very similar web components!

A few patterns have emerged for me…

### Naming custom elements

Naming things is famously hard. Every time you make a new custom element you have to give it a name that includes a hyphen. I settled on the convention of using the first part of the name to echo the element being enhanced.

If I’m adding an enhancement to a `button` element, I’ll wrap it in a custom element that starts with `button-`. I’ve now got custom elements like `button-geolocate`, `button-confirm`, `button-clipboard` and so on.

Likewise if the custom element is enhancing a link, it will begin with `a-`. If it’s enhancing a form, it will begin with `form-`.

The name of the custom element tells me how it’s expected to be used. If I find myself wrapping a `div` with `button-geolocate` I shouldn’t be surprised when it doesn’t work.

### Naming attributes

You can use any attributes you want on a web component. You made up the name of the custom element and you can make up the names of the attributes too.

I’m a little nervous about this. What if HTML ends up with a new global attribute in the future that clashes with something I’ve invented? It’s unlikely but it still makes me wary.

So I use `data-` attributes. I’ve already got a hyphen in the name of my custom element, so it makes sense to have hyphens in my attributes too. And by using `data-` attributes, the browser gives me automatic reflection of the value in [the `dataset` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).

Instead of getting a value with `this.getAttribute('maximum')` I get to use `this.dataset.maximum`. Nice and neat.

### The single responsibility principle

My favourite web components aren’t all-singing, all-dancing powerhouses. Rather they do one thing, often a very simple thing.

Here are some examples:

- Jason’s [`aria-collapsable`](https://github.com/jgarber623/aria-collapsible) for toggling the display of one element when you click on another.
- David’s [`play-button`](https://github.com/daviddarnes/play-button) for adding a play button to an `audio` or `video` element.
- Chris’s [`ajax-form`](https://gomakethings.com/html-web-components/) for sending a form via Ajax instead of a full page refresh.
- Jim’s [`user-avatar`](https://blog.jim-nielsen.com/2023/html-web-components-an-example/) for adding a tooltip to an image.
- Zach’s [`table-saw`](https://github.com/zachleat/table-saw) for making tables responsive.

All of those are [HTML web components](https://adactio.com/journal/20618) in that they _extend_ your existing markup rather than JavaScript web components that are used to _replace_ HTML. All of those are also unambitious by design. They each do one thing and one thing only.

But what if my web component needs to do two things?

I make two web components.

The beauty of custom elements is that they can be used just like regular HTML elements. And the beauty of HTML is that it’s composable.

What if you’ve got some text that you want to be a level-three heading _and_ also a link? You don’t bemoan the lack of an element that does both things. You wrap an `a` element in an `h3` element.

The same goes for custom elements. If I find myself adding multiple behaviours to a single custom element, I stop and ask myself if this should be multiple custom elements instead.

Take some of those `button-` elements I mentioned earlier. One of them copies text to the clipboard, `button-clipboard`. Another throws up a confirmation dialog to complete an action, `button-confirm`. Suppose I want users to confirm when they’re copying something to their clipboard (not a realistic example, I admit). I don’t have to create a new hybrid web component. Instead I wrap the `button` in the two existing custom elements.

Rather than having a few powerful web components, I like having lots of simple web components. The power comes with how they’re combined. Like Unix pipes. And it has the added benefit of stopping my code getting too complex and hard to understand.

### Communicating across components

Okay, so I’ve broken all of my behavioural enhancements down into single-responsibility web components. But what if one web component needs to have awareness of something that happens in another web component?

Here’s an example from The Session: the results page when you search for [sessions in London](https://thesession.org/sessions/search?q=London+England).

There’s a map. That’s one web component. There’s a list of locations. That’s another web component. There are links for traversing backwards and forwards through the locations via Ajax. Those links are in web components too.

I want the map to update when the list of locations changes. Where should that logic live? How do I get the list of locations to communicate with the map?

[Events](https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events)!

When a list of locations is added to the document, it emits a custom event that bubbles all the way up. In fact, that’s all this component does.

You can call the event anything you want. It could be a `newLocations` event. That event is dispatched in the `connectedCallback` of the component.

Meanwhile in the map component, an event listener listens for any `newLocations` events on the document. When that event handler is triggered, the map updates.

The web component that lists locations has no idea that there’s a map on the same page. It doesn’t need to. It just needs to dispatch its event, no questions asked.

There’s nothing specific to web components here. Event-driven programming is a tried and tested approach. It’s just a little easier to do thanks to the `connectedCallback` method.

I’m documenting all this here as a snapshot of my current thinking on [HTML web components](https://adactio.com/journal/20618) when it comes to:

- naming custom elements,
- naming attributes,
- the single responsibility principle, and
- communicating across components.

I may well end up changing my approach again in the future. For now though, these ideas are serving me well.