#web-components — Public Fediverse posts

oh damn, declarative shadow DOM is baseline widely available now #WebComponents #HTML

Name My Color is now framework free! https://gregstoll.wordpress.com/2026/08/20/name-my-color-is-now-framework-free/ #Essay, #Programming, #Projects, #WebComponents

📝 New post about overriding local component-level tokens from the global theme. #webcomponents

https://daverupert.com/2026/08/how-to-pierce-your-shadow-belly-button/

Same Name; Different Component With Scoped Custom Element Registries, by @frontendmasters.com:

https://master.dev/blog/same-name-different-component-with-scoped-custom-element-registries/?ref=frontenddogma.com

#webcomponents #javascript #browsers

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 collisions and types from node_modules
- New options: `maxParseDepth` and `maxParseProperties` for deep or large types

Check it out!
https://wc-toolkit.com/documentation/type-parser/

who has the tiniest (yet capable) html tagged template literal module? #WebComponents

I've tried #WebAwesome, a framework-agnostic #UI component library based on #WebComponents. It works perfectly with the #Neux library because it can be used directly, without the need for JSX or other framework-specific approaches.

Try it together in the playground: https://v49.livecodes.io/?x=id/qtqxqig3qs5

#WebDev #Frontend #JavaScript

#Development #Explorations
HTML in canvas · Rendering interactive DOM elements inside a canvas https://ilo.im/16ewi5

_____
#Forms #WebComponents #HTML #DOM #WebGL #AI #Chrome #Browser #APIs #WebDev #Frontend

🥳🎉 Behold! Yet another tech blog where someone whines about web components *again*. After a decade of building "enterprise-scale" systems, it turns out web components are just like that acquaintance who promises a lot but never delivers—especially when #accessibility and #compatibility are involved. 🙄🔧
https://arielsalminen.com/2026/progressive-web-components/ #webcomponents #techblog #enterprise #HackerNews #ngated

🚀 I made a little app for #webcomponents called CEM-to-CSV that creates a lil' spreadsheet to help with naming audits across your entire design system.

It's all powered by your custom element manifest. Upload, drop, or paste your CEM today!

https://cem-to-csv.netlify.app

quicktipp #120: How to use a third party web component. "For the rest of us" edition.

There's a long read here:

https://dev.to/treehouse/how-to-use-third-party-web-components-for-the-rest-of-us-36ff

#javascript #node #html #webdev #web #webcomponents #vanillaweb #vite #npm #node #frontend #js

#Development #Launches
Jelly UI · Dependency-free web components that feel alive https://ilo.im/16eoko

_____
#Theming #Navigation #Forms #Overlays #Components #WebComponents #Accessibility #WebDev #Frontend #HTML

New SIIP - Conversation with HAX tutorial is up 🎬

Written walkthrough with screenshots + embedded video:
https://siip-conversation-with-hax.surge.sh

Full video: https://www.youtube.com/watch?v=TNF0uzYi9Kk

#HAX #HAXTheWeb #WebComponents #EdTech #OER

#Development #Launches
Kernel · A component library built on semantic HTML, not div soup https://ilo.im/16eo9r

_____
#SemanticHTML #Accessibility #Components #WebComponents #React #Library #OpenSource #WebDev #Frontend #HTML

New branding? Who dat? The Allons-y Studio site got a full refresh yesterday, complete with new branding, clearer messaging, and more emphasis on design systems, web components, and accessibility.

Poke around: https://allons-y.studio/

Coming soon: a deep-dive into how web components are implemented in Gecko; custom elements and shadow DOM from the engine's side of the glass.

#WebComponents #DesignSystems

HTMX and Web Components Instead of React

https://kore-nordmann.de/blog/htmx-and-web-components-instead-of-react.html

#webdev #htmx #react #webcomponents

How to use Vue and i18n to offer your site in multiple languages

I am genuinely surprised we haven’t covered this topic before, given that it is one of the most powerful ways to instantly level up a web application. Today, we are tackling internationalization, showing you how to easily offer your website in multiple languages. The web is inherently global, and locking your content behind a single language limits your audience from the start. To bridge that gap, we are going to integrate the industry-standard vue-i18n plugin to handle our translations reactively, all while continuing to use the sleek Web Awesome components we’ve been exploring lately. We will look at how to neatly organize your content into JSON files, avoid common reactivity quirks, and instantly swap your UI’s vocabulary with a simple dropdown menu.

What is our goal? Previously, we focused on making your apps accessible to individuals with visual impairments, ensuring they can access your content. This time, we will concentrate on making your content accessible to those who do not understand English. In the header, you will notice a dropdown with the options of English, Spanish, French, and Mandarin. When you select a new language, the content changes.

If you want to modify what the (sample text) poem says, there is a JSON file available for each of the four languages. To obtain translations, you can either consult someone who speaks the language or, as I did, use a translation website.

Example: https://enjoyed-star-jennet.codepen.app

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
https://wc-toolkit.com/cem-utilities/cem-analyzer-plugin/

Some new things have rolled out recently in the #WebComponents helpers for Storybook:

- added storybookHelpersReloader utility for automatic CEM watching & reloads
- added per-story #CSS scoping via useScopedStyles
- bug fixes

#webdev #frontend #javascript
https://wc-toolkit.com/integrations/storybook/

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

https://wc-toolkit.com/integrations/vuejs/

#Development #Launches
Hyperblam · Make music with HTML https://ilo.im/16dx4d

_____
#HTML #Music #Sound #Audio #CustomElements #WebComponents #APIs #WebAudioAPI #WebDev #Frontend

"How building an HTML-first site doubled our users overnight" by @moh_kohn is another great example why building things on the web with #ProgressiveEnhancement (and #astro) in mind absolutely rules:

https://www.mohkohn.co.uk/writing/html-first/

#WebDev #frontend #html #WebComponents #a11y #accessibility #InclusiveDesign

📝 New post: A workaround for `:host(:has([slot]))` in Chromium using `@Scope` #webcomponents

https://daverupert.com/2026/06/fix-for-host-has-slot/

#Development #Approaches
Building an HTML-first site · How it doubled a company’s users overnight https://ilo.im/16dnhl

_____
#Business #Users #Forms #Website #WebComponents #Astro #React #WebDev #Frontend #HTML

How Building an HTML-First Site Doubled Our Users Overnight, by @moh_kohn:

https://mohkohn.co.uk/writing/html-first/?ref=frontenddogma.com

#html #webcomponents #validation #traffic #casestudies