#web-components — Public Fediverse posts

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/

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

#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

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

📝 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

#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

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

Une petite entrée en matière sur les Web Components.

🔗 https://gomakethings.com/guides/web-components/

#webcomponents

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.

#html #webdev

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.

#html #webdev

Un tout petit web component pour améliorer la gestion d'erreur dans les formulaires HTML.

🔗 https://npmx.dev/package/validation-enhancer

#HTML #form #validation #lib #webcomponents

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

#designsystems #webcomponents #examples

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

#designsystems #webcomponents #examples

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.com

​Please 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

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.com

​Please 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

#javascript #rendering #painting #webcomponents

Intentionally Blocking Rendering With JavaScript, by @jayfreestone.com:

https://www.jayfreestone.com/writing/intentional-render-blocking-javascript/?ref=frontenddogma.com

#javascript #rendering #painting #webcomponents

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

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

The idea popped into my head that maybe you could use the <template> element to create virtualized content while still making it available for AI agents and bots, so I decided to test it out.

#html #webcomponents #javascript #performance
https://dev.to/stuffbreaker/content-virtualization-using-the-html-element-2gn7

The idea popped into my head that maybe you could use the <template> element to create virtualized content while still making it available for AI agents and bots, so I decided to test it out.

#html #webcomponents #javascript #performance
https://dev.to/stuffbreaker/content-virtualization-using-the-html-element-2gn7

@davatron5000 and @chriscoyier thanks for the shout-out on this week's episode of @shoptalkshow!

I'm happy to help out with #WebComponents DX where I can.

https://shoptalkshow.com/717/

@davatron5000 and @chriscoyier thanks for the shout-out on this week's episode of @shoptalkshow!

I'm happy to help out with #WebComponents DX where I can.

https://shoptalkshow.com/717/

Anyone got any good introductory articles/tutorials on web components for someone who is not coming from a big heavy JS framework?

Most guides I've found by searching assume significant experience with React or Vue, and tend to frame web components largely in contrast to those.

I'm especially interested in how they'd fit in to a framework agnostic, progressively enhanced component/pattern library.

#WebDev #WebComponents

Anyone got any good introductory articles/tutorials on web components for someone who is not coming from a big heavy JS framework?

Most guides I've found by searching assume significant experience with React or Vue, and tend to frame web components largely in contrast to those.

I'm especially interested in how they'd fit in to a framework agnostic, progressively enhanced component/pattern library.

#WebDev #WebComponents

#Development #Approaches
Framework-agnostic design systems · A practical approach to web components https://ilo.im/16d42s

_____
#DesignSystems #WebComponents #Elena #VitePress #WebDesign #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Approaches
Framework-agnostic design systems · A practical approach to web components https://ilo.im/16d42s

_____
#DesignSystems #WebComponents #Elena #VitePress #WebDesign #WebDev #Frontend #HTML #CSS #JavaScript

This article originally appeared on The Fulcrum.

Welcome to this week’s The Programmer’s Fulcrum.

It’s your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism.

As usual, we aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional […]

This article originally appeared on The Fulcrum.

Welcome to this week’s The Programmer’s Fulcrum.

It’s your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism.

As usual, we aim to provide actionable content you can use to destroy Techno Feudalism each week. It has the additional […]

Je travaille depuis peu pour #dezrann un outil #openSource d’analyse musicale développé par l’université de #Lille.

Et dans ce cadre on travail pour faire des #webComponents pour simplement afficher des partitions dans des pages web.

C’est encore brut de décoffrage mais ça marche, vous pouvez voir la demo sur http://ala.algomus.net/dev/dev-20260520/embed/

#analyseMusicale #vueJs #webDev

And what better way to keep notes than...

... The same way I do everything else.

Create a case in the system, use <task-case> to embed it in the practice plan, vtt on the field. Review later

[Maybe remember their names by week 3]

Lovely

#webcomponents #soccer

One of the pain points of my #WebComponents type parser was its inability to parse types from "node_modules". Now it will parse them, and if it can't, it logs a warning with the type name, declaration location, and reason it was skipped.

https://wc-toolkit.com/documentation/type-parser/

One of the pain points of my #WebComponents type parser was its inability to parse types from "node_modules". Now it will parse them, and if it can't, it logs a warning with the type name, declaration location, and reason it was skipped.

https://wc-toolkit.com/documentation/type-parser/

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

The 5 stages of enlightenment

https://status-indicator.webcomponent.io

#webdev #frontend #webcomponents #poetry

The 5 stages of enlightenment

https://status-indicator.webcomponent.io

#webdev #frontend #webcomponents #poetry

From React to Native Web With nanotags: A Migration That Saved 100 KB, by @travisturner.bsky.social (@evilmartians):

https://evilmartians.com/chronicles/from-react-to-native-web-with-nanotags-a-migration-that-saved-100kb

#migrating #react #webcomponents #libraries

From React to Native Web With nanotags: A Migration That Saved 100 KB, by @travisturner.bsky.social (@evilmartians):

https://evilmartians.com/chronicles/from-react-to-native-web-with-nanotags-a-migration-that-saved-100kb

#migrating #react #webcomponents #libraries

Blog post: Custom Element Partials in BackflipHTML

https://olivierforget.net/blog/2026/custom-element-partials/

It's the first step towards Web Component support in Backflip. You can create and use partials based on custom elements, including using attribute values as data in the template. The goal is an HTML template system that you can use from anywhere that is a natural ally of modern HTML-first design.

#html #webcomponents

🚀 HAX 26.0.0 released for PHP / NodeJS / CLI
100s of #webcomponents via
NPM: https://www.npmjs.com/search?q=%40haxtheweb
haxcms-nodejs: https://www.npmjs.com/package/@haxtheweb/haxcms-nodejs
haxcms-php: https://github.com/haxtheweb/haxcms-php
cli: https://www.npmjs.com/package/@haxtheweb/create

This post originally appeared on The Fulcrum.

Welcome to this week’s The Programmer’s Fulcrum.

It’s your weekly curation of the essential news in the Open Media Network and Fediverse development communities with a focus on devastating big tech via Techno Anarchism.

There is a lot of coverage of the shitshow that is ShitHub this week. And that makes me so happy I moved to Codeberg several […]

<status-indicator> web component

https://status-indicator.webcomponent.io

#webdev #frontend #webcomponents