WebComponents

Shadow DOM and Slots can be part of a progressive enhancement strategy, actually.

Learn about island architecture with web components and how it fits seamlessly with Enhance's philosophy.

Trials and tribulations of building a custom and accessible Select menu UI component.

An explainer for doing web development using only vanilla techniques.

Shadow DOM allows authors to attach DOM trees to elements, providing encapsulation for markup, styles and even JavaScript.

Learn all about web components with this free roadmap, including Custom Elements, HTML Templates, Shadow DOM, and more!

Chris Haynes - web developer consultant

Chris Haynes - web developer consultant

A

Slots are a fantastic new feature that comes along with the Shadow DOM. You don't even need to make a custom element to use them. Let's look at how to use slots, name slots, and some of the lifecycles and features that come along with them.

We look at why web components are a good solution now, and the very basics on how to make one.

In this codelab, you’ll learn about & build a Web Component from scratch and then progressively enhance it to a Lit Element.

An element that shows or hides based on provided conditions - oddbird/show-when

Or not your grandma’s slots.

Learn how to easily build, manage, and distribute your component library in an ever-increasing complex web development landscape.

Dan Valinotti's personal website

A cheat sheet for learning the basics of Lit, the JavaScript library for building web components.

"Web components" (the term) can be inaccurate, misleading, and yes, harmful.

In this codelab, you’ll learn about & build a Web Component from scratch and then progressively enhance it to a Lit Element.

Web components can dramatically loosen the coupling of JavaScript frameworks. To prove it, we're going to do something kinda crazy: build an app where every single component is written in a different JavaScript framework.

Naming custom elements, naming attributes, the single responsibility principle, and communicating across components.

Thanks for watching me chat about HTML Web Components! I’ve put together a ton of resources to help you dig deeper into building simpler, more resilient web experiences. ⏰ Preorder my new course on Web Components! Want to learn how to build Web Components from scratch, master best practices, and more? Preorder today and get $100 off of the launch price. The Talk & Slides Get the Slides

In two recent episodes of the ShopTalk podcast, Dave Rupert and Chris Coyier talked about Web Component Therapy. Chris and Dave have a few concerns about web components that require therapy. I’ve decided to put those concerns on the couch to see if we can talk through some solutions to these issues.

Here is an explanation of our recommended client side reactive state management approach if you need one. The client side API pattern has three main parts: 1. Reactive data store to share state changes throughout the app. 2. A web worker to move slow operations like Fetching off the main (UI) thread. 3. An API helper to wrap up these pieces of code and handle message passing between them.

Recently, there has been a spate of articles that talk about using the Light DOM in Web Components. Everyone knows we are extremely pro-Light DOM web components. Today we are announcing some new client-side Light DOM functionality.

Say hello to Enhance WASM — backend agnostic server-side rendering for web components.

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site: - GoogleChromeLabs/dark-mode-toggle

New web platform features make it easier to build custom elements that work like built-in form controls.

The ElementInternals API allows us to create form-associated custom elements which we can use to make our own supercharged form fields.