Web Components make your code more obvious

One of my favorite side-effects of using Web Components for DOM manipulation over more traditional approaches is that it makes your code a lot more obvious.

For example, consider a <button> that opens a modal.

<button id="open-tos">View the Terms of Service</button>

Where would you find the code that runs that? What element does it open? Are there any side-effects that go along with it?

I can guess. There’s probably an element on the page that contains the phrase “Terms of Service” that I could look for (maybe, hopefully). I could search the code base for #open-tos.

But imagine instead that you use an HTML Web Component, like this…

<toggle-modal target="#tos">
	<button>View the Terms of Service</button>
</toggle-modal>

Now I know, just from looking at the HTML, that this <button> opens the #tos element. If I want to see how it works, I can look for the toggle-modal.js file (assuming your developer team uses some basic conventions for naming things).

Worst case scenario, I can search for the less needle-in-a-haystack term customElements.define('toggle-modal'.

I’m seeing first-hand how useful this is on a consulting project I’m working on for NASA. The backend developer knows HTML, but not much JavaScript. He’s told me that this style of authoring has made it a lot more obvious what’s happening with the code.

If you want help building stuff like this, I have one more consulting spot open.