#webcomponents — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #webcomponents, aggregated by home.social.
-
Same Name; Different Component With Scoped Custom Element Registries, by @frontendmasters.com:
-
Same Name; Different Component With Scoped Custom Element Registries, by @frontendmasters.com:
-
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 typesCheck it out!
https://wc-toolkit.com/documentation/type-parser/ -
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 typesCheck it out!
https://wc-toolkit.com/documentation/type-parser/ -
who has the tiniest (yet capable) html tagged template literal module? #WebComponents
-
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
-
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
-
#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 -
#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 -
🥳🎉 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!
-
🚀 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!
-
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
-
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 -
#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.shFull video: https://www.youtube.com/watch?v=TNF0uzYi9Kk
-
#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 -
#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.
-
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.
-
HTMX and Web Components Instead of React
https://kore-nordmann.de/blog/htmx-and-web-components-instead-of-react.html
-
HTMX and Web Components Instead of React
https://kore-nordmann.de/blog/htmx-and-web-components-instead-of-react.html
-
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
#vueI18n #VueJs #WebAwesome #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
#vueI18n #VueJs #WebAwesome #WebComponents -
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/ -
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/ -
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.
-
I'm excited to announce the new WC Toolkit #WebComponents type generator for @vuejs! This provides inline documentation, autocomplete, and API validation.
-
#Development #Launches
Hyperblam · Make music with HTML https://ilo.im/16dx4d_____
#HTML #Music #Sound #Audio #CustomElements #WebComponents #APIs #WebAudioAPI #WebDev #Frontend -
#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
-
"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
-
📝 New post: A workaround for `:host(:has([slot]))` in Chromium using `@Scope` #webcomponents
-
#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 -
#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
-
How Building an HTML-First Site Doubled Our Users Overnight, by @moh_kohn:
https://mohkohn.co.uk/writing/html-first/?ref=frontenddogma.com
-
Une petite entrée en matière sur les Web Components.
-
Some progress on BackflipHTML. I added {{ expr }} updating DOM-side.
Here are some #webcomponents that wrap <meter> and display the {{ level }} numerically below. (A class name also gets added to the component based on level's value, per earlier work).
This is all very experimental still of course.
-
Some progress on BackflipHTML. I added {{ expr }} updating DOM-side.
Here are some #webcomponents that wrap <meter> and display the {{ level }} numerically below. (A class name also gets added to the component based on level's value, per earlier work).
This is all very experimental still of course.
-
Un tout petit web component pour améliorer la gestion d'erreur dans les formulaires HTML.
-
Framework-Agnostic Design Systems: A Practical Approach to Web Components, by @scott.is (@piccalil.li):
https://piccalil.li/blog/framework-agnostic-design-systems-part-1/?ref=frontenddogma.com
-
React-like syntax with WebComponents.
After spending some time with Lit, I really appreciated its lightweight footprint but wasn't a fan of the class-based components. While Vue offers a great approach, I still prefer the intuitive nature of React's syntax for debugging and deterministic rendering. This led me to a challenge: could I build a UI framework using WebComponents that completely eliminates the need for transpilation?
I have written a breakdown of the concept, the architecture, and where I want to take it. I highly invite you to take a look, check out the code, and explore the live demo.
* How it works: https://positive-intentions.com/docs/projects/dim/dim-jsx-webcomponents
* Checkout the code: https://github.com/positive-intentions/dim
* Storybook demo: https://dim.positive-intentions.comPlease note, while the project is open-source, this is a personal exploration rather than an attempt to launch "yet another framework." It is not production-ready and is built for my own upcoming project migrations, but I am sharing it in hopes that the methodology is educational or interesting to the community.
I would love to hear your thoughts on this approach. Feel free to reach out if you have any questions or want to discuss the implementation details.
#WebDev #WebDevelopment #Frontend #FrontendDev #JavaScript #JS #TypeScript #TS #HTML #HTML5 #CSS #SoftwareEngineering #SoftwareEngineer #Coding #Programming #WebDesign #OpenSourceProject #IndieDev #SideProject #Tech #Technology #DevCommunity #Fediverse #FediverseDevs #WebStandards #CustomElements #ShadowDOM #VanillaJS #NoTranspiler #NoBuild #BuildStep #EsModules #ComponentDriven #UIUX #DesignSystems #TechExperiment #LearningInPublic #Developer #ComputerScience #OSS #Github #React #WebComponents #Lit #Vue #ReactJS #JSX #Storybook #TechArticle #TechBlog #TechWriting #WebDevArticles
-
Intentionally Blocking Rendering With JavaScript, by @jayfreestone.com:
https://www.jayfreestone.com/writing/intentional-render-blocking-javascript/?ref=frontenddogma.com
-
Building a full web form using Vue and Web Awesome
Previously, we learned how to build dropdowns, radio button groups, buttons, and combo boxes. I figure the next step is to put it all together and build a full web form. In today’s demo, we are going to build a “feedback” form where someone provides their name, contact information, and what they think of you. It doesn’t actually send it anywhere, but it shows the result, and it is easy enough to add something to record the results.
The last time around, we created https://grand-block-gar.codepen.app using the data files in https://github.com/steinbring/data/tree/main/v1/locations/us_states_municipalities_zctas to let the user select a state (using a list of suggestions), select a municipality (using a list of suggestions that are based upon the selected state), and select a zip code / postal code (using a list of suggestions that are based upon the selected municipality). In that demo, state management and form data are handled in App.vue, and the options for states, municipalities, and zip codes/postal codes use computed properties. ComboBox is imported from ComboBox.vue, accepts the properties “label”, “placeholder”, “disabled”, “options”, and “modelValue”, emits a new value for “modelValue” when the value of the web awesome combobox changes, and it only creates
<wa-combobox>inside the component.So, what are we doing this time? In this week’s demo, we are doing the same thing (the Web Awesome components are in Vue child components and the data and computed properties are in parent components), except the form itself is in a child of App.vue.
The form asks for your name, your opinion, your contact information, and your preferred contact method. If you select that you want to be contacted by phone, it uses the radio group element to ask about when you would like to be called.
To use the form “in anger”, you would want to add an API call to an endpoint that could send an email and/or save the submission to a database record. Since the web component is added to the Vue component, and the form elements’ Vue components are as generic as possible, swapping out Web Awesome for something like Bootstrap or Bulma is pretty easy.
Example: https://optimal-brook-eft.codepen.app
#VueJs #WebAwesome #WebComponents