In today’s episode, I talk about HTML Web Components, an approach to authoring Web Components that focuses on enhancing existing HTML.
- Jeremy’s article - https://adactio.com/journal/20618
- Consulting - https://gomakethings.com/consulting/
Um, I think a lot of the way they were originally framed was as if they were maybe some browser native alternative to react or view. But the reality is they do A lot of the same things that those libraries do, if you use them that way, worse. And so Jeremy presents a different way to approach using web components.
He writes, try not to bring React’s mindset with you. Think about composability with existing materials. Do you really need to invent an entirely new component from scratch or can you use HTML up until it reaches its limit and then enhance the markup? If your custom element is empty, it’s not an HTML web component.
But if you’re using a custom element to extend existing markup, That is an HTML Web Component. I’m going to drop a link to Jeremy’s whole article in the show notes. It’s awesome. Go read the whole thing. It’s what really made Web Components click for me. And then I actually got to experience the power of HTML Web Components firsthand that very week.
I was building an app for NASA. Um, just as a quick aside, by the way, if you’d like to work with me, I have, um, I have at least one consulting spot left. You can learn more about that over at go make things dot com slash consulting. Uh, but so I’m working on a project for NASA. The back end engineer has built a powerful, simple back end using python.
form, uh, and then I had an object of handlers with different, um, different methods to run based on that data form attribute. So I might be adding an item, removing an item, combining some items for each event handler, uh, I would show some status messages and then either redirect the user to another page or display some success message in the UI and add or remove a list items.
It worked, but as the number of interactions grew, so did the complexity and size of the setup. There was a lot of not so dry code, so I abstracted some of it, and that reduced the repetitive code, but also made the code less readable and even more complex to maintain. And then I read Jeremy’s article, and I had an epiphany.
Just use a web component. I ended up refactoring my first attempt into an HTML web component. Uh, the AJAX form component wraps around a form element. And by default, the form submits to the server just like normal. Once the, once the web component initializes though, It enhances the form. What I love about web components is that you can easily customize behavior with custom attributes.
So for example, on my Ajax form, custom element or web component, I would add a prevent default attribute. And when that’s present. The web component will stop the form from redirecting the page. I can have a series of message dash attributes that let you customize the submitting success and error messages.
And if you need to update a portion of the UI, the target attribute will find the element with that same selector in the HTML that the fetch request method returns and replace the existing element in the UI. with the updated one. Uh, and so you can have a really robust set of interactions with just a single component.
and reason about. So I think this is just an amazing, amazing approach. If you want to learn more about web components, I have a series of workshops, tutorials, projects and boilerplates over at leanwebclub. com membership is just 9 a month or 90 for an entire year and gets you access to hundreds of courses, workshops, projects and more on a wide range of front end topics, web components and beyond.
That’s it for today. I hope to see you next time. Cheers.