I've been finding these a11y interaction tests we developed super helpful for keeping interactive components on track www.npmjs.com/package/@etc...

Still trying to refine it. A lot of the time I get it to create things in pure semantic HTML so I can style it up. Recently I managed to export our design system with repomix, then fed that to Claude to transform into Claude instructions to keep in the repo and that really helped with the output.

FOUC it, we just use swap

And this only applies to a small number of elements (button, typography, lists, inputs, links, img). We can still make cards, grids, containers, form groups, validation messages, etc etc without wrapping anything

Yeah, that's fair, it depends on the ecosystem. I run into too many instances of a component needing to support yet another thing that was already supported by native HTML because the element is nested inside it so this is our current get out. The system needs to take least responsibility.

It's kind of a similar technique to David Darnes "Little bits" talk darn.es/web-componen... or Jeremy Keiths HTML Web components adactio.medium.com/html-web-com... (Some good links to other people doing the same thing in there, meyers blinded by the light dom is awesome meyerweb.com/eric/thought...)

Here's a demo set of components that uses this technique, we've used them across several projects in different frameworks and they work well. diamond.etch.co/components?p...

That's what's we're doing, still controlling the visual. But this technique means the component renders instantly without needing JS or SSR. Because the semantic element exists in the light DOM it's very easy to add all the extra unknown props needed (aria, tracking attributes, etc)

That's a bit dodgy! I don't think web components should contain existing semantic elements because it turns into a bit of a mess. That's templating, not components. We really like wrapping existing elements to enhance them over here etch.co/blog/css-web...

What I realised was I was adding a Block class to the host when we can just use :host, then the styles were scoped anyway and modifiers are mostly things like :host([variant="foo"])

Sorry for the late reply, here's an article on it etch.co/blog/bem-for...

Sorry for the late reply, here's an article about it on our site etch.co/blog/bem-for...

Yeah, e.g. Here's an article etch.co/blog/bem-for...

Component Element Attribute instead of Block Element Modifier and moving everything to CSS, trying to ditch SCSS.

AI is exchanging quality for output to drive the overall goal. Can you make more money selling 8,000 bad books than 1 good book?