iiinova — where your digital self keeps evolving

Burton Smith @stuffbreaker.bsky.social · 7h

Even that second queue is much faster than it used to be. It could be a few seconds or minutes. Either way, shadow DOM does not negatively affect SEO.

010

Burton Smith @stuffbreaker.bsky.social · 19h

Yep! All pages get added to a render queue regardless of JS. If your app is using async content or what they call the "app shell model" where your app is rendered from a single anchor node, it will be added to a slower queue.

100

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

Wave 2 is reserved for async data/content loaded by JS and typically indexed much later. Local JS will be loaded and indexed in wave 1 including JS defined custom elements that don't use async data.

110

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

Calling all fellow web devs, design engineers, and web components nerds! Would you be interested in a #WebComponents conference??? Let us know! #html #css #javascript #WebDev #DesignSystems

0159

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

One point of clarification I want to add is that the contents of JavaScript defined custom elements / shadow DOM are discoverable by web crawlers, so SEO shouldn't be an issue. dev.to/stuffbreaker...

dev.to

SEO and Web Components - 2023 Edition

This post includes some important updates about web components and search engine optimization (SEO)

100

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

The sweet spot - good DX and good UX. 🤘

010

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

Agreed! That's one of the reasons I've been rolling out these new articles about CSS-only custom elements. We should be able to have good developer ergonomics like auto complete, type checking/linting, and inline documentation without having to rely on JavaScript or framework components to get them.

110

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

Hopefully, we can get to a point where those aren't mutually exclusive.

110

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

Not necessarily. This is a single aspect of that feature. It's all about your needs. I'm also a big fan of class utilities and CSS-only custom elements with no shadow DOM. Shadow roots aren't the right solution for every problem and performance shouldn't be the only hook you hang your decision on.

100

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

In global CSS, selectors like .card .title or .list > .item + .item can force the engine to check many more elements across the page.

000

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

The second is invalidation. When a class or attribute changes, the engine uses "invalidation sets" to decide which elements need restyling. Those sets are built per scope, so a change inside a shadow root only invalidates against that scope's selectors.

100

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

So with 1,000 components, each element is matched against a handful of rules instead of one giant global stylesheet.

200

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

The first is rule matching - each shadow root has its own set of style rules. An element inside it is only tested against its own scope's rules. Document-level rules are never tested against shadow content, and shadow rules are never tested against the rest of the page.

100

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

Sorry, you are correct. Recalculation is what I was referring to. The shadow DOM helps in two ways:

110

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

The shadow DOM can actually improve page performance. Because the styles get rendered in DOM fragments, selectors get applied to smaller DOM trees and repaints stay scoped when content gets updated.

110

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

I'm checking this out! Thank you!

000

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

And if I'm working outside or in a brightly lit room I often switch to light mode. A lot of it depends on the implementation too.

210

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

For personal use, I typically prefer dark mode. When presenting, especially on a projector in a poorly lit room, I switch to light mode.

120

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

Are web components the bad DX or UX in this scenario?

200

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

I had built something like this in the past, but it's not interactive. I wouldn't mind revisiting it. www.npmjs.com/package/wc-dox

npmjs.com

010

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

If Claude can plan a trip to Disneyland, can it organize a web components conference?

100

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

I think it's finally time for a web components conference!

260

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

> we can also compile DOM code (including Custom Elements written in TypeScript) to native code statically linked to DOM without JavaScript Wait, can you explain this a little more?

120

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

I think it will become more of a thing, especially now that we can treat them like first-class components by including them in the custom elements manifest.

010

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

I agree it seems out of place, but I think the slots API is compelling for a few reasons: - it's a declarative way to position child elements - if you ever needed to make it a defined custom element, you could upgrade it without introducing a breaking change potentially

110

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

In the tech world, that's an eternity. 😂

100

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

Attribute and slot selectors will be different too. I'm not sure if the juice is worth the squeeze for me. 😂

010

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

That's true! The down side is that you have to maintain two sets of stylesheets for your components.

110

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

Yeah, but this isn't just about more semantic elements and avoiding classes on divs and spans. By composing them this way, I created an API that I can now create documentation, auto complete, and type safety for.

010

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

I wouldn't consider them CSS-only custom elements, but they are definitely non-JS. DSD can also be done without the custom element. You could add it to a span if you wanted. The.other reason why DSD isn't the same is that it's not portable. You have to stamp the template out everywhere.

110

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

In case you didn't read to the bottom, the CEM Generator supports these, so you can generate docs and framework integrations for these with the rest of your other web components. 🤘 cem-generator.wc-toolkit.com/guide/featur...

cem-generator.wc-toolkit.com

CSS-Only Custom Elements

Document custom elements that are defined by CSS without a JavaScript class.

060

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

I love this idea! Some things I've been thinking about when this was originally proposed are discoverability and environment integration. I think there is going to be some complexity around that.

040

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

I totally agree with this statement. Is there an article with more details?

100

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

Yeah, me too! Let me know how it goes. I've got some more things coming.

000

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

Some features include: - lightweight - it leverages TS to handle the AST parsing, so we only have a few dependencies for the whole thing - full API inheritance for extended components - API auto-detection and documentation with inline comments - plugin API - CSS-only custom element detection

130

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 · 11/09/2026

We do for 2 reasons: - we share tokens for web, ios, and android - we offer them as a point of safe customization and discourage others

010

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

I was using it, but I don't think it was using the latest spec from the W3C DTCG.

100