Using mixins to share css across similar web components which also provides a class attribute for them to hook in to. Just when I thought I didn’t have much use for classes.
#css #webcomponents #designsystems
#WebComponents
2 posts2 participants0 posts today
#Development #Analyses
Can UI components conform to WCAG? · Why they technically can’t, and why it makes sense https://ilo.im/1663ux
_____
#Accessibility #WCAG #Standards #Conformance #UiComponents #WebComponents #Webpages #WebDev #Frontend
Hidde's blogCan components conform to WCAG?Here's why they technically can't, and why that makes sense to me.
The CEM Language Server is here!
Remember the frustration of working with custom elements in your editor? No auto-complete for , no hover docs for attributes, go-to-definition that just... doesn't?
Those dark ages are over. 
I built a complete toolchain from scratch in Go that changes everything:
Analyzes your TypeScript/JavaScript to understand your custom elements
Generates Custom Element Manifest files from your source code 
Provides Language Server Protocol support for amazing editor integration
You get:
Smart completions for element names, attributes, slots
Hover documentation pulled directly from your code
Go-to-definition that actually works
Real-time validation and error checking
Works with VS Code, Zed, Neovim, Emacs
The beautiful part? It's a complete end-to-end solution. One tool that both understands your code AND provides the editor experience. Zero serialization overhead, perfect consistency.
Built on the shoulders of @Matsuuu's pioneering work with custom-elements-language-server. This explores a different architectural approach while building on his insights about what features matter most.
Finally - TypeScript-level tooling for our ! 
bennypowers.dev/cem/docs/lsp/
github.com/bennypowers/cem/discussions
#WebComponents #LSP #DeveloperTools #Lit #CustomElements #OpenSource #Go #TypeScript
cemLanguage ServerThe CEM Language Server provides intelligent IDE features for custom elements in HTML and TypeScript files. It analyzes your custom elements manifest files to offer contextual autocomplete, hover documentation, and other editor enhancements. CEM discovers all the custom elements manifests available to your project (in your package.json), and watches for changes to your element sources to keep an in-memory version of your local element manifest up to date.
Features Autocomplete Get up-to-date HTML element API completions in HTML files and Lit template literals.
I am very excited to announce the alpha release of the #WebComponents Language Server!!!
#Development #Collections
HotFX · A collection of well-crafted web components https://ilo.im/165u3y
_____
#WebComponents #Website #DesignPattern #Design #WebDesign #WebDev #Frontend #HTML #JavaScript
ilo.imHotFXHotFX is a collection of HTML custom elements for common UI patterns and special effects
Exciting episode of @shoptalkshow this week. We had Tim Farnam creator of @HotPage, a drag n' drop site builder with a focus on semantic HTML. It's also powered by #webcomponents.
: https://shoptalkshow.com/675/
: https://www.youtube.com/watch?v=njxLB82t3kA
ShopTalk · 675: Building Hot Page with Tim FarnamTim Farnam stops by to talk with Chris and Dave about his new project, Hot Page, and why and how he started building it after working in print and web news.
Simon Duhem et Nicolas Jouanno Daniel vous inviteront à explorer les défis de l'accessibilité des web components avec le Shadow DOM et comment le RGAA et les outils d’audit pourraient évoluer.
https://www.paris-web.fr/2025/conference/les-web-components-et-laccessibilite
#Development #Releases
Tailwind Plus adds vanilla JavaScript support · UI blocks no longer require a JavaScript framework https://ilo.im/165nit
_____
#TailwindCSS #DesignPatterns #WebComponents #JavaScript #Frameworks #WebDev #Frontend #HTML #CSS
ilo.imVanilla JavaScript support for Tailwind PlusEvery UI block in Tailwind Plus is now fully functional, accessible, and interactive, even if you don't use a framework like React or Vue.
Received some feedback from a team using the Custom Element library for an Enterprise Design System I've been working on. Some cross-component lifecycle adjustments were necessary to enhance React compatibility. The nice part was that they also mentioned their (React 19) application was much faster with custom elements, both perceptually and measurably (using Lighthouse).
#Development #Guides
Public CSS variables in the shadow DOM · How to expose them in web components https://ilo.im/165h87
_____
#CustomProperties #WebComponents #ShadowDOM #API #Accessibility #WebDev #Frontend #CSS #JavaScript
ilo.imPublic CSS Custom Properties in the Shadow DOMThe definitive guide to using public CSS Custom properties to configure web components externally. Surely no one will ever write about this topic again.
Replied in thread
@judell hey, this is very interesting. The old VB UI in a new web jacket. I just tooted about the Rube Goldberg machine that is modern web dev, and in some ways I was more empowered at the start of my career in 1997 with Visual Basic.
https://social.coop/@smallcircles/114878688112419149
You might have a look if maybe there isn't a cool combination to make with #Datastar at https://data-star.dev which recently went v1.0
They continue where #HTMX stopped, in #hypermedia land, where they use #WebComponents for complex UI.
social.coopjust small circles 🕊 (@smallcircles@social.coop)The Rube Goldberg machine that is modern front-end development. "Make simple things complex again".
I have AstroJS/Starlight documentation site. It works. But hey, new versions everywhere in the deps tree. Gotta incorporate brand new incompatible Tailwind v4 config.
Simple change, just follow the docs, right?
Wrong. Dark mode no longer works and it is a mystery why. Need to go expert mode, delve in multiple issue trackers, code bases. A day passes..
On dark mode default feature being broken.
The JSX type generator now generates types for the #css custom properties for your #WebComponents!
Web Components ToolkitJSX Types GeneratorGenerate JSX types for custom elements / web components
Move over Bootstrap.
Web Awesome is an awesome successor to what in my opinion was already the best open source #WebComponents library (Shoelace) on the market. Now we have the best #CSS framework on the market.
All of the CSS is…um…just CSS and all of the components are…um…just web components. Native #WebDev APIs across the board. 
Take a first look at the brand new public beta:
https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/
That HTML Blog · Web Awesome, the First All-in-One Web Components + CSS Framework, is Finally Here
More from 
Jared "Elderly" White "Hippie"
Replied in thread
@leaverou These all power HTML in some way or other...
- Scoped Custom Element Registries
- Reference Target API
- elementInternals.type https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md
- Declarative CSS Modules and the adoptedstylesheets attribute https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md
- Declarative Partial Updates https://github.com/WICG/declarative-partial-updates
- DOM Parts
- Platform based windowing/virtualization
- <tabs>
I've got lots more for CSS/JS if you get signed up for those.
Good luck with the survey!
GitHubMSEdgeExplainers/ElementInternalsType/explainer.md at main · MicrosoftEdge/MSEdgeExplainersHome for explainer documents originated by the Microsoft Edge team - MicrosoftEdge/MSEdgeExplainers
Created some tests for web components that retrieve a required design token value and check if the rendered elements have the equivalent computed value. For example, if the element is showing the correct values for a focus ring.
Web components compadres, what is your favorite way to style your web components? Thinking about techniques that consider customizability and CSS developer experience, as well as performance. Share with me your favorite libraries and tell me why you like their approach! #webcomponents #styling #designsystems
#Development #Techniques
Bluesky likes · Accessible, localizable web components are still a challenge https://ilo.im/164qhh
_____
#WebComponents #Accessibility #Localization #SocialMedia #Content #WebDev #Frontend #HTML #JavaScript #API
I love that I can add CSS custom properties to a Custom Element Manifest via JSDoc. Let's see if I can add the idents/keys as specific properties to a JSX style attribute object. #css #jsdoc #cem #webcomponents
Frontend Coffee Break
Episode 45: Storybook, Web Components and Figma Tokens
This is an angular-free podcast but we do talk web components. Chucho and Ricard discuss Storybook, what to consider when thinking about using it. Are Figma tokens the future? Sources of truth are nice but are they worth it?
What's your experience with these tools?
Audio and video options:
Frontend Coffee Break - PodcastFrontend Coffee Break - Podcast | Ep. #45: Storybook, Web Components and Figma TokensThis is an angular-free podcast but we do talk web components. Chucho and Ricard discuss Storybook, what to consider when thinking about using it. Are Figma tokens the future? Sources of truth are ...
@angular team, can you please fix the `CUSTOM_ELEMENTS_SCHEMA` for #WebComponents? It's really broken.