links.lmorchard.com - #webcomponents

Do web components have a future if nobody is writing them? | Read the Tea Leaves

Tue, 20 Oct 2026 18:04:49 +0000

So whatever happens to web components in the future, and regardless of whether web developers ignore them, forget them, celebrate their demise, or write them off entirely, nothing can take this victory away from them. They are woven into the texture of the web platform in a way that can never be undone. For me, this makes me happy even if I never write another web component again.

Tags: #webcomponents #webdev

How building an HTML-first site doubled our users overnight

Thu, 18 Jun 2026 19:52:25 +0000

It is not acceptable to bounce users on old browsers, users with bad network connections, users using assistive technologies. Certainly not from a monopoly public service. A lot of hype and noise is pressing us to extend the cowboy, wild-west phase of the software industry’s expansion. We should set that aside, and take ourselves seriously as a mature industry. Build a web application that works on a playstation portable on a 3G connection - if you do, it will work for all your users, and it will still work 30 years from now.

Tags: #accessibility #html #webcomponents #webdev

Elena | Progressive Web Components

Sat, 02 May 2026 17:46:40 +0000

Elena is a simple, tiny library for building Progressive Web Components. Unlike most web component libraries, Elena doesn’t force JavaScript for everything. You can load HTML and CSS first, then use JavaScript to progressively add interactivity.

Tags: #webcomponents #webdev

Progressive Web Components | Ariel Salminen

Sat, 02 May 2026 17:44:34 +0000

A Progressive Web Component is a native Custom Element designed in two layers: a base layer of HTML and CSS that renders immediately, without JavaScript, and an enhancement layer of JavaScript that adds reactivity, event handling, and more advanced templating.

Tags: #css #html #webcomponents #webdev

Under the hood of MDN's new frontend

Wed, 15 Apr 2026 16:50:27 +0000

Last year, we launched a new frontend for MDN. The most noticeable changes were adjustments to our styles; we simplified and unified the MDN design across all of our pages. In truth, the biggest changes were not reader-visible, but rather in the overhauled code that powers our frontend. This post describes what we've done, the technologies we chose, and why we did it at all.

Tags: #mdn #mozilla #webcomponents #webdev

Fully Local Code Embeds | Aleksandr Hovhannisyan

Tue, 31 Mar 2026 01:15:24 +0000

A few years ago, I was looking for a way to add interactive code sandboxes to my Markdown files without embedding third-party iframes, like the ones from Codepen or Codesandbox. Those services are great and I use them all the time to share demos, but I’ve never been a fan of using them on a blog since you have to jump back and forth between your local Markdown file and an external site to make changes to the demos. Plus, they typically load lots of JavaScript.

Tags: #metablogging #webcomponents #webdev

How To Dynamically Install Custom Elements: HeydonWorks

Tue, 30 Dec 2025 03:23:45 +0000

Today, I want to look into one very specific topic in excruciating technical detail: how to dynamically load custom elements.

Tags: #customelements #webcomponents #webdev

The handleEvent() method is the absolute best way to handle events in Web Components | Go Make Things

Fri, 19 Dec 2025 01:04:04 +0000

A bunch of people shared their own approaches, but the one that absolutely blew my mind was the handleEvent() method, a platform-native method for managing all of the events on your Web Component.

Tags: #customelements #js #web #webcomponents #webdev

Custom Asidenotes – Eric’s Archived Thoughts

Tue, 02 Dec 2025 01:57:37 +0000

Previously on meyerweb, I crawled through a way to turn parenthetical comments into sidenotes, which I called “asidenotes”. As a recap, these are inline asides in parentheses, which is something I like to do. The constraints are that the text has to start inline, with its enclosing parentheses as part of the static content, so that the parentheses are present if CSS isn’t applied, but should lose those parentheses when turned into asidenotes, while also adding a sentence-terminating period when needed.

Tags: #customelements #metablogging #webcomponents #webdev

Syntax Highlighting in Web Component Templates

Wed, 12 Nov 2025 20:07:33 +0000

The extremely quick read is, add /* HTML */ to the front of the template. Case sensitive and space sensitive (though hopefully one day it won't be so strict). Now highlighting and prettier (with save and fix) works. Note that you need the es6-string-html VS Code extension for this to highlight correct (something I had forgotten I had installed).

Tags: #html #vscode #webcomponents #webdev

HTML is for lovers | Go Make Things

Wed, 12 Nov 2025 20:06:20 +0000

I’ve had the opportunity to use Kelp on a big client project for the last few weeks, and it’s been so awesome to work with!

Tags: #html #kelp #webcomponents #webdev

The killer feature of Web Components - daverupert.com

Wed, 15 Oct 2025 17:10:46 +0000

One unsung feature in the web components space that I don’t think gets enough attention is the Custom Elements Manifest initiative. I think it’s the killer feature of web components.

Tags: #customelements #webcomponents #webdev

Split Flap

Mon, 28 Jul 2025 16:24:13 +0000

As an ode to the train stations of my childhood, I bring you a skeuomorph split-flap web component

Tags: #css #js #webcomponents #webdev

Building a QR Code HTML Web Component | Scott Jehl, Web Designer/Developer

Fri, 31 Jan 2025 23:29:21 +0000

Recently, a friend asked if I knew of a Web Component that generates a QR Code from meaningful HTML. She said that there seemed to be plenty of options for creating QR codes in general, but none that worked by extending already-useful HTML instead of just configuring it all with JavaScript. I couldn't find any either, but thinking through these kinds of patterns is probably what I enjoy most about working on the web, so I thought I'd write up how I'd make one.

Tags: #qrcodes #webcomponents #webdev

A Web Component to expand or collapse all details elements | Go Make Things

Wed, 27 Nov 2024 23:46:47 +0000

Today, I wanted to share a little Web Component I made for expanding or collapsing all of the

elements on a page.

Tags: #dev #webcomponents #webdev