New article on Frontend Masters: Constructable Stylesheets + adoptedStyleSheets = one parse, every shadow root. Share CSS across Shadow DOM Web Components using Lit. No duplication, cloning, or style tag hacks. Read it here ↓ frontendmasters.com/blog/constru... #WebComponents #CSS #Frontend

Constructable Stylesheets and adoptedStyleSheets: One Parse, Every Shadow Root

If you have any shared styles across multiple shadow DOMs (imagine 20 custom button components), a Constructable Stylesheets is just way more efficient.

frontendmasters.com

⎈ 𝗡𝗲𝘄 𝗔𝗿𝘁𝗶𝗰𝗹𝗲: Shadow DOM Focus Delegation: Getting delegatesFocus Right I wrote an article which discusses using 𝗱𝗲𝗹𝗲𝗴𝗮𝘁𝗲𝘀𝗙𝗼𝗰𝘂𝘀 for web components to delegate focus when user clicks on host element: frontendmasters.com/blog/shadow-... #𝗪𝗲𝗯𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 #𝗦𝗵𝗮𝗱𝗼𝘄𝗗𝗢𝗠 #𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱𝗗𝗲𝘃 #𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆

Shadow DOM Focus Delegation: Getting delegatesFocus Right

You don't necessarily have to do focus handling yourself with shadow DOM web components. For simple wrapper components, there is an easier (and better) way.

frontendmasters.com

@officehours.systems I found myself deep in thought after listening to last episode. NOT re tokens but…how to get Davey to pronounce interoperability. He already has interop. Now, just add a cat’s ability to purr: “purrability”. Put it together and u have interop-purrability. B00m w00t drops mic 🎤

Every AgnosticUI component now has a live CodePen 2.0 Pen. One click gets you an editable React playground importing straight from the NPM package. No install, no setup. 55+ Pens. Two bugs found and squashed along the way. Built on brand new CodePen 2.0. #AgnosticUI #React #CodePen #OpenSource

My new guide on @FrontendMasters shows you how to use FACE and ElementInternals to make your Web Components work natively with HTML forms. Featuring implementation notes from the AgnosticUI trenches. Check it out: frontendmasters.com/blog/form-as... #WebComponents #BuildInPublic

Form-Associated Custom Elements in Practice

When you make a Web Component for a form element, you've got a bit of extra work to do to make sure they participate on the form in expected ways.

frontendmasters.com

▷ ag context doesn't clobber your work Generates AI context but only touches the AgnosticUI section. Everything else stays. HTML sentinel markers mean re‑runs = updates, not overwrites. Run once. Run daily. Run safely. www.agnosticui.com #webdev #ui #webcomponents #css

⎈ New CLI command: ag context One command. Your component library. Perfect AI context. ag context reads installed components, extracts every Prop type, and writes a complete spec file, auto-detecting Claude, Cursor, Copilot, Windsurf, etc. ➞ Your LLM finally "knows" your codebase. agnosticui.com

AgnosticUI - Local Components for React, Vue, Svelte & More

The UI kit that lives in your project. Local components. AI-friendly. React. Vue. Svelte. Astro. Angular. Solid. Preact.

agnosticui.com

My first article on the FrontendMasters Blog about the AgnosticUI rewrite in Lit: frontendmasters.com/blog/post-mo... #WebDev #Frontend #UI

Post Mortem: Rewriting AgnosticUI with Lit Web Components

A framework-agnostic component library, designed to be styled. It can be done.

frontendmasters.com

𝗗𝗶𝘀𝗰𝗼𝘃𝗲𝗿𝘆 𝗗𝗮𝘀𝗵𝗯𝗼𝗮𝗿𝗱 for React, Vue, and Lit One implementation. 100% framework consistency. → Token-driven UI → 15+ "One-Class" Skins → Light/Dark variants included www.agnosticui.com/playbooks/da... #DesignSystems #Frontend #WebDev#CSS

AgnosticUI - Local Components for React, Vue, Svelte & More

The UI kit that lives in your project. Local components. AI-friendly. React. Vue. Svelte. Astro. Angular. Solid. Preact.

agnosticui.com

Bluesky New AgnosticUI playbook: Multi-step onboarding wizard React, Vue, Lit implementations. Timeline tracking. Includes LLM prompts for customization. Features new SelectionButtonGroup and SelectionCardGroup components. agnosticui.com/playbooks/onboarding.html

🚀 New in AgnosticUI: SelectionButtonGroup & SelectionCardGroup Just shipped two components while building our Onboarding Playbook! ✨ SelectionButtonGroup Compact button-styled radio/checkbox ✨ SelectionCardGroup Rich card-based selection #WebDev #React #Vue #Svelte #WebComponents #OpenSource

Most AI-generated UI defaults to React + shadcn + Tailwind 😴 I used AgnosticUI to test if an LLM has the capability to respect a design system's constraints to generate bespoke pages: Login Playbook + prompts are public if you care about repeatable AI UI output: www.agnosticui.com/playbooks/lo...

AgnosticUI - Local Components for React, Vue, Svelte & More

The UI kit that lives in your project. Local components. AI-friendly. React. Vue. Svelte. Astro. Angular. Solid. Preact.

agnosticui.com

AgnosticUI major update live! 🚀 Login Playbook: AI recipes for React, Vue & Lit. Buttons: Full-width support. Inputs: Auto-centered addons & standard sizing. CLI: Automation via --skip-prompts. Figma: Token variables, 5 components. www.agnosticui.com/playbooks/lo... #WebDev #OpenSource #Frontend

I'm still trying to figure out how to get the word out on my OSS without resorting to just cracking back open my IDE and writing code. I'm so much more comfortable there. Hours of shameless plugs in Discord servers. I feel like a fucking used car salesperson. Necessary evil but I really hate it :(

I completely rewrote AgnosticUI v2 with Lit Web Components @lit/react wrappers for React DX Vue wrappers for Vue DX Direct web components for Svelte, Solid, Angular Feedback and GH ⭐ welcomed! 🔗 agnosticui.com ⭐ github.com/AgnosticUI/agnosticui #WebDevelopment #WebComponents #Lit #UiComponents