Web Components

A “stand alone” Web Component is a Web Component that provides some design or functionality but that has little by way of dependencies, strong opinions, or heavy design. In other words, Web Components that could easily imagine sliding into any project without much trouble.

Dave posts about this common web component learning blunder. The blunder is… not using a framework. I’m very guilty of this myself. I was just commenting about how the lifespan of web components could be wonderfully long if we keep them dependency free, which theoretically we can because they are a native part of the […]

What is the go-to component library these days? I’m not sure there is a clear winner right now. Bootstrap is still popular I’m sure. It seems stable but also sort on maintenance mode and the fact that they are recommending this feels like they are kinda done. I imagine the Sass dependency makes it slot […]

I admit I went pretty far in my web development career without understanding that Streamed HTML is a thing. And while I’m admitting things, I’m still not 100% sure when it’s an ideal solution and how best to take advantage of it. But knowing is half the battle sometimes, so let me get into some […]

I’ve expressed my love of the Light DOM recently. In Web Components land, there are plenty of reasons to stick with it, but admittedly, there is stuff you’re giving up by not using Shadow DOM. The biggest to me is the usage of slots which is a nice way to handle HTML abstraction. Why my […]

I think the styling story for Shadow DOM Web Components is not great. I’ve got what seems to me like a simple idea that would help that. Fair warning: I’m just some dude on the internet with an opinion here. I’m coming at it from an author’s perspective who has only written a handful of […]

The concept of event delegation in JavaScript boils down to this: rather than attach event handlers directly to the element triggering the event, attach it to an element higher up in the DOM. The event should bubble up there anyway, and you can test the event’s trigger element to ensure you’re responding to the event […]

First: the Light DOM is just… the regular DOM. When people talk about native Web Components, the Shadow DOM comes up a lot. I have extremely mixed feelings about the Shadow DOM. On one hand, it’s a powerful scoping tool. For example, CSS applied inside the Shadow DOM doesn’t “leak” outside, meaning you can be […]