HTML Web Components

While Web Components have been around for years, they're seeing a bit of a renaissance thanks to an emerging approach for authoring them: ditch the shadow DOM and progressively enhance existing HTML.
In this talk, we'll look at what Web Components, how the "HTML Web Component" approach works, why it's awesome, and some tips, tricks, and gotchas when working with them.
Hate the complexity of modern front‑end web development? I teach people a simpler, faster way to build for the web. Get free Daily Developer Tips at gomakethings.com.

[@kodejohan]

Very interesting approach!

[@gomakethings]

Thanks!

[@Killyspudful]

This is excellent, as ever. Much appreciated.

[@gomakethings]

Thanks so much, friend!

[@TimFegan]

Thanks for the demo. I'm new to WebComponents but was using React before. These components are very similar and simple. I was wondering why you don't put the event handlers on the directly?

[@gomakethings]

I do, actually! this.btn.addEventListener() is attached directly to the button. I assume you're actually asking why I don't use an onclick event on the button element itself, like . Using addEventListener() lets me use handleEvent() instead of having to rely on Function.bind() or some other trick to get access to "this" in my callback methods, and also makes debugging a bit easier. Using on* methods on elements was an older technique that predates addEventListener(), and React brought it back into popularity for who knows what reason.

[@TimFegan]

@@gomakethings Thanks for the explanation. I liked but all the routing is getting a bit cumbersome. You gave me a great alternative to think about. Thanks.

[@evilspymace209]

i'm guilty for using web components as an alternative to vue. right now i'm rewriting a SPA. i wanted to avoid the excessive tooling and ever changing apis. honestly it's so much more fun!

[@rustyprogrammer]

Thanks, very clear :-). I wonder why, in the count component, you inherit from the HTMLElement and not directly from HTMLButtonElement?

[@gomakethings]

This comes up a lot! There are two reasons: 1. The Web Component itself isn't a button. One of it's child elements is. If I wanted the custom element itself to behave like a button, I'd also need to add stuff like a `role` attribute and additional event listeners. 2. That's also unfortunately not how Web Components work. You extend the HTMLElement, then layer in your custom behavior. You can't reliably extend other element types with customElements.define(). There was a spec in the works that would let you extend native elements with custom functionality using `is` attribute. Firefox and Chromium moved forward with it, and then the WebKit team straight up refused to implement it, effectively killing the spec. developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is My understanding is that there's a replacement spec in the works that WebKit is allegedly onboard with, but I don't know much about it at this time as it's nowhere near production ready.