Web Components

I had a blast chatting with Chris and Dave on my personal favorite podcast about building websites.

Attributes and properties allow you to control how HTML elements function and read data about their state. Although the terms are often used interchangeably, subtle differences between the two can lead to unexpected behavior and bugs.

Everyone loves animated GIFs, right? Not if you have finite bandwidth, a shaky network connection or motion sensitivity! But fear not… modern browsers make it easier than ever to level up our GIF game!

Everyone’s talking about HTML Web Components, and I think it’s the start of something magical!

Components are everywhere, but they are rarely reusable across systems. A design system component is written differently than a CMS editor component. But does it have to be this way? Could we take one set of components and port them to multiple JavaScript frameworks, import them into design tools, and use them for the editing interfaces in content management systems?

By wrapping and enhancing HTML elements, we can provide a solid baseline experience, with progressive enhancement as the cherry on top.

By leveraging native browser controls, we can make accessible and high-performing components with just a dash of JavaScript.

How custom elements have disrupted the structure of our components, encouraging us to broaden the scope of patterns we once considered foundational.

Web components promise speedier integration. At some level, I understood this. I've even made this exact point while advocating for them. And yet, what happened on a recent project surprised me.