iiinova — where your digital self keeps evolving

Burton Smith @stuffbreaker.bsky.social · 16/09/2026

A few months ago someone asked what I think a Custom Elements Manifest generator should look like. Here's my first pass at it. The goal was to make it light weight and easy to use. It's still in the early stages, but let me know what you think. #WebComponents cem-generator.wc-toolkit.com

cem-generator.wc-toolkit.com

Overview

Generate Custom Elements Manifests for component libraries quickly and extensibly.

3154

Burton Smith @stuffbreaker.bsky.social · 12/09/2026

Why did I discover this at the beginning of my 8 hour flight??? Now I won't be able to think about anything else...

011

Burton Smith @stuffbreaker.bsky.social · 09/09/2026

🌶️ HOT TAKE! 🌶️ Figma is not a very good source of truth for your design tokens. The limitations in types and the way features are implemented make it difficult to capture common tokens like line heights and shadows. #DesignSystems

3202

Burton Smith @stuffbreaker.bsky.social · 07/09/2026

I love making fun/nerdy projects for myself. Sometimes when I think it's nerdy enough, I like to share it. Get ready for something nerdy... #WebComponents

0110

Burton Smith @stuffbreaker.bsky.social · 04/09/2026

Anyone coming to #kcdc2026 next week??? I'll be nerding-out in a session about design tokens and design systems if anyone wants to join.

120

Burton Smith @stuffbreaker.bsky.social · 22/08/2026

Does anyone know if there's a way to support relative units (1.5) or percent based (150%) line heights in @figma.com variables? #DesignSystems

100

Burton Smith @stuffbreaker.bsky.social · 22/08/2026

Are people using AI tools to manage their inbox?

100

Burton Smith @stuffbreaker.bsky.social · 15/08/2026

Ok, @webawesome.com team, this CSS Parts highlighter in your docs is pretty rad! #WebComponents webawesome.com/docs/compone...

Screenshot of a documentation page where hovering over an item in the API table highlights the affected area on a component diagram.

2313

Burton Smith @stuffbreaker.bsky.social · 09/08/2026

The #WebComponents type parser just got upgrades! - Imported type aliases now resolve via the AST and TypeScript type checker instead of by name string - fixing types from node_modules - New options: `maxParseDepth` and `maxParseProperties` for deep or large types wc-toolkit.com/documentatio...

wc-toolkit.com

Type Parser

Get access to your API's TypeScript values

0123

Burton Smith @stuffbreaker.bsky.social · 06/08/2026

@thdxr.com is OpenCode going to get some enterprise features like SSO? I've got 300+ engineers itching to move off of our existing solution.

200

Burton Smith @stuffbreaker.bsky.social · 09/07/2026

Why would someone use ElementInternals in an accordion web component?

310

Burton Smith @stuffbreaker.bsky.social · 30/06/2026

I'm excited to announce WC Toolkit's new CEM Analyzer Plugin for Vite, Rollup, Rolldown, or Webpack builds. ✅ Auto-runs on build 🔁 Reruns on file changes 🔧 Zero config — auto-discovers your CEM config file #WebComponents #webdev #frontend #javascript wc-toolkit.com/cem-utilitie...

wc-toolkit.com

CEM Analyzer Plugin

Vite/Rollup/Webpack plugins to run Custom Elements Manifest Analyzer

2111

Burton Smith @stuffbreaker.bsky.social · 30/06/2026

Some new things have rolled out recently in the #WebComponents helpers for @storybook.js.org: - added storybookHelpersReloader utility for automatic CEM watching & reloads - added per-story #CSS scoping via useScopedStyles - bug fixes #webdev #frontend #javascript wc-toolkit.com/integrations...

wc-toolkit.com

Storybook Helpers

Helpers designed to make integrating web components with Storybook easier.

081

Burton Smith @stuffbreaker.bsky.social · 29/06/2026

A trend I have been noticing more and more in #DesignSystems is creating opinionated CSS resets. I love it! It makes your app feel themed without ever having to touch a component. #webdev #css #frontend dev.to/stuffbreaker...

dev.to

Enhance your CSS Reset with your Design System

If you're starting a web project, you're probably starting with a CSS reset, and for most of us, that...

270

Burton Smith @stuffbreaker.bsky.social · 26/06/2026

Nothing like a lively conversation about whether links should be styled as buttons and vice versa. #DesignSystems #WebDev

181

Reposted by Burton Smith

Bramus @bram.us · 24/06/2026

👀 crrev.com/c/7952977 “Support colorspace and alpha attributes on <input type=color>” Available for testing behind the Experimental Web Platform Features flag in Chrome Canary, starting tomorrow.

0183

Burton Smith @stuffbreaker.bsky.social · 23/06/2026

I'm excited to announce the new WC Toolkit #WebComponents type generator for @vuejs.org! This provides inline documentation, autocomplete, and API validation. wc-toolkit.com/integrations...

wc-toolkit.com

Vue.js Types Generator

Generate Vue.js types for custom elements / web components

171

Burton Smith @stuffbreaker.bsky.social · 07/06/2026

How are teams organizing their #DesignTokens based on the @designtokens.org spec? Are they in single file, split up by theme, category, tier, etc.? #DesignSystems

431

Burton Smith @stuffbreaker.bsky.social · 05/06/2026

I had an interesting conversation the other day. There was a desire to make only colors adjustable for light and dark modes. The problem with that is that more than just colors need to be adjusted in those modes like shadows, font weights, letter spacing, etc. #designsystems

240

Burton Smith @stuffbreaker.bsky.social · 02/06/2026

The idea popped into my head that maybe you could use the <template> element to create virtualized content while still making it available for AI agents and bots, so I decided to test it out. #html #webcomponents #javascript #performance dev.to/stuffbreaker...

dev.to

Content Virtualization using the HTML <template> Element

When I started this experiment, the core question was simple: Because content inside...

281

Reposted by Burton Smith

Kevin Powell @kevinpowell.co · 21/05/2026

The State of CSS 2026 survey is out! These survey's are a huge signal to the browser makers on what people want, and the more people fill the out, the better that information is. survey.devographics.com/en-US/survey...

survey.devographics.com

State of CSS 2026

Take the State of CSS survey

06125

Burton Smith @stuffbreaker.bsky.social · 24/05/2026

Women's clothing sizes are the dumbest, most nonsensical thing ever...

200

Burton Smith @stuffbreaker.bsky.social · 20/05/2026

One of the pain points of my #WebComponents type parser was its inability to parse types from "node_modules". Now it will parse them, and if it can't, it logs a warning with the type name, declaration location, and reason it was skipped. wc-toolkit.com/documentatio...

wc-toolkit.com

Type Parser

Get access to your API's TypeScript values

061

Reposted by Burton Smith

Jake Archibald @jakearchibald.com · 27/04/2026

I've been having fun making these & I'm really happy that people are enjoying them. They're assembled, composited, and encoded in the browser. I love how much you can do with the modern web platform.

1533

Burton Smith @stuffbreaker.bsky.social · 25/04/2026

What happened to this #WebComponents feed? It hasn't updated anything in over a week? bsky.app/profile/did:...

240

Burton Smith @stuffbreaker.bsky.social · 14/04/2026

If you're using the Custom JSDoc Tags plugin for your #WebComponents, you can now add them at the property level! wc-toolkit.com/documentatio...

wc-toolkit.com

JSDoc Tags

A CEM Analyzer plugin for mapping custom JSDoc tags to the Custom Elements Manifest

040

Reposted by Burton Smith

Beatzball @beatzball.bsky.social · 10/04/2026

Introducing Litro - a fullstack framework for Web Components. File-based routing, SSR + SSG, API routes, Vite HMR. Basically the Nuxt/Next experience, but you write Lit, FAST Element, or Elena components instead of React/Vue. #WebComponents #Lit #TypeScript #SSR #OpenSource #WebDev litro.dev

litro.dev

Litro

The fullstack web component framework — SSR, static generation, and your choice of Lit, FAST, or Elena.

5172

Burton Smith @stuffbreaker.bsky.social · 24/03/2026

When I was at Microsoft, we were trying to find ways around some of the pain points of #WebComponents, so I did an exploration on what Declarative Custom Elements could potentially provide us. #html #css #javascript dev.to/stuffbreaker...

dev.to

How Declarative Custom Elements (DCE) Could Improve Web Components

Declarative Custom Elements promise to revolutionize web components by eliminating JavaScript requirements, solving FOUC issues, and improving SSR.

5329

Burton Smith @stuffbreaker.bsky.social · 12/02/2026

Are teams using #TypeScript declaration maps to provide a better go-to-definition experience for developers? I've used source maps, but I don't think I've provided declaration maps. #SoftwareEngineering #Programming

140

Burton Smith @stuffbreaker.bsky.social · 11/02/2026

When you are in an #html file and you want to go-to-definition for a custom element, what do you think the behavior should be? Should it go to: - type definition - JS file where class is defined - CEM entry - something else #webcomponents #javascript

510

Reposted by Burton Smith

Adam Argyle @nerdy.dev · 03/02/2026

Wild how far you can push "customizable select" with just #CSS nerdy.dev/nice-select

1539869

Reposted by Burton Smith

Una Kravets @una.im · 30/01/2026

Finally solving the tooltip arrow usecase with a new CSS property called border-shape ⚠️ WIP early-stage API, timeline TBD, more info coming soon But it brings a lil tear to my eye to see this working, border & all 🥲 This demo uses anchored container queries + border-shape + a little animation

712213

Reposted by Burton Smith

Stefan Judis @stefanjudis.com · 02/02/2026

TIL, Chrome 144 ships some new pseudo-classes. 👏 Within limits, you can now style the matching strings of the "find in page" search. ::search-text { // matching strings } ::search-text:current { // currently matched string } More on the blog. 👇 www.stefanjudis.com/today-i-lear...

68916

Burton Smith @stuffbreaker.bsky.social · 01/02/2026

I've been having fun with improving this FOUC solution for #WebComponents. Thank you, everyone, for the feedback! I've improved upon it.

body:has(:not(:defined)) {
opacity: var(--wc-loaded, 0);
animation: showBody 0s linear 100ms forwards;
}

@keyframes showBody {
to {
--wc-loaded: 1;
}
}

340

Burton Smith @stuffbreaker.bsky.social · 30/01/2026

I've been trying to think of a way to reduce the flash of unstyled content (FOUC) when using #WebComponents with something I could add to my #CSS reset and not need #JavaScript. Here's what I came up with:

A CSS snippet for reducing FOUC with web components:

body:has(:not(:defined)) {
opacity: 0;
transition: opacity 0s 50ms;
}

5172

Burton Smith @stuffbreaker.bsky.social · 29/01/2026

Awesome episode! Thanks for the shout-out @davatron5000.bsky.social! Any time you and @chriscoyier.net want to chat about web components DX, I'd love to come on (I know, I know, it's the nerdiest of topics).

183

Reposted by Burton Smith

Peter Kröner @sirpepe.bsky.social · 22/01/2026

Ladies, gents, and non-binary pals: I could use some work. Here's what I do best: - Workshops: JS, TS, web components, frontend performance… - Development: vanilla frontends, legacy refactoring (esp. React, CSS) - DevRel: yapping & writing - General coaching & code review 👉 peter@peterkroener.de

137

Burton Smith @stuffbreaker.bsky.social · 22/01/2026

The #WebComponents CEM Validator just got an upgrade with improved logic for rule evaluation and better type checking when evaluationg exported types. #webdev #html #css #javascript wc-toolkit.com/cem-utilitie...

wc-toolkit.com

Custom CEM Types

Types to make working with custom data in the CEM easier

020