WebComponents

For years, I’ve written my web component classes with a constructor() method that calls super() to get access to the parent HTMLElement class’s properties… customElements.define('my-awesome-web-component', class extends HTMLElement { constructor () { // Inherit properties super(); // The rest of your code... } }); For my demo projects, I often do all the things in the constructor(). But with Kelp, my UI library for people who love HTML, I’m initializing my in the connectedCallback() method.

Template for kicking off a new Web Component. Contribute to daviddarnes/component-template development by creating an account on GitHub.

An exploration into the basics of web components and the Lit framework

The Guide to Web Components

The Guide to Web Components

Its an amazing foresight that CSS part names are disconnected from the DOM element on which they exist.

Today, I wanted to talk about the “right” way to load web components to ensure they work predictably every time. Let’s dig in! The challenge Web components are self instantiating. Let’s imagine you’re creating a table of contents. When you use a traditional JavaScript library, you explicitly instantiate the library on a specific element. div id="toc"/divconst myTOC = new TableOfContents('#toc'); But with web components, all you need to do is include the custom element associated with the component.

Build better with Web Awesome, the open source library of web components from Font Awesome.

Read this page on the Filament Group website

Yesterday, I gave an overview of how I approach adding dynamic content to a static, server-rendered website. Today, we’re going to dig into one piece of that puzzle: ajaxy forms. Let’s dig in! Forms FTW! Forms are awesome! With an HTML form, you can support JavaScript-free user iterations. For example, let’s say I want to let users add an item to a list. I can include a form element with a field to add a new item.

Simple. Fast. Web Components.

"Web Components" is an umbrella term for three main technologies: Custom elements, shadow DOM and HTML templates. Using these technologies allows us to create reusable, optionally encapsulated components. There are some important caveats regarding accessibility we need to keep in mind when authoring web components.

Web components work in SSR, depending on which SSR you're talking about.

The truly No JavaScript web component.

A curated list of awesome framework-agnostic standalone web components - davatron5000/awesome-standalones

Individual open source web components with zero or few dependencies.

Custom elements (web components) for making audio and video player controls that look great in your website or app. - muxinc/media-chrome

Because this essay is over 11 000 words long(!) I’ve made a convenience EPUB file for offline reading. (EPUB only! No PDF this time.) You can download it over on the fulfilment service I use, Lemon Squeezy, with the option to pay what you want if you feel the urge to support my writing.

My talk about using Web Components to sprinkle a little fun onto my website, and how well they work in Design Systems

Over the weekend, Remy Sharp asked… Are we at all worried, or even wary, of web component name collisions? The concern here is that if you have a custom element named toggle-tabs, and then important another Web Component that also uses that same custom element name, you’ve now introduced a collision. In the ES import-based JavaScript world, having two functions with the same name isn’t that big of a deal because…

Why not both?

A few years ago I wrote an article suggesting that Web Components might not be the most beneficial...

A presentation created with Slides.

Web components are by default pretty isolated. There are some nice patterns to start sharing state and actions among web components. This article explores the 'provider' pattern

The one where I combine custom elements