#customelements — Public Fediverse posts

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

Custom elements can have default accessibility semantics which should be stated and encouraged not to override.

#html #customelements #accessibility

I’m making #HTML #CustomElements using <template>; is there no way to opt-in to have it inherit styles from the parent document? It's a really nice way to encapsulate some reusable markup and behavior, but I still want all my buttons to look the same :neobread_think:

#Development #Templates
Web component starter template · The essentials to ship production-ready components https://ilo.im/169jml

_____
#WebComponents #CustomElements #Accessibility #ProgressiveEnhancement #Encapsulation #ShadowDOM #Testing #Npm #WebDev #Frontend

#Development #Templates
Web component starter template · The essentials to ship production-ready components https://ilo.im/169jml

_____
#WebComponents #CustomElements #Accessibility #ProgressiveEnhancement #Encapsulation #ShadowDOM #Testing #Npm #WebDev #Frontend

#Development #Templates
Web component starter template · The essentials to ship production-ready components https://ilo.im/169jml

_____
#WebComponents #CustomElements #Accessibility #ProgressiveEnhancement #Encapsulation #ShadowDOM #Testing #Npm #WebDev #Frontend

#Development #Templates
Web component starter template · The essentials to ship production-ready components https://ilo.im/169jml

_____
#WebComponents #CustomElements #Accessibility #ProgressiveEnhancement #Encapsulation #ShadowDOM #Testing #Npm #WebDev #Frontend

#Development #Guides
Installing custom elements dynamically · A reusable pattern for on-the-fly custom element loading https://ilo.im/169hh8

_____
#Loading #CustomElements #WebComponents #WebDev #Frontend #DOM #HTML #JavaScript

Building optimistic UI in Rails (and learn custom elements)

https://railsdesigner.com/custom-elements/

#HackerNews #BuildingOptimisticUI #Rails #CustomElements #UIDevelopment #FrontendDevelopment

🚨 Feature drop: cem serve - a manifest-driven dev server for #WebComponents 🧩

Think #Storybook, but opinionated for #HTML #CustomElements:

📄 Write demos as plain HTML (not JSX/MDX stories)
🎛️ Auto-generate knobs from manifest metadata
⚡ Smart reload - only reloads affected demos
📦 No build step (#TypeScript transformed on-the-fly)

Your demos are just HTML → users can copy them directly from docs, works in any framework.

Read: bennypowers.dev/posts/custom-elements-dev-server/
Try: npx @pwrs/cem serve

#WebComponents #HTML #DevTools

The big thing that sets Joist's dependency injection library apart from others is the fact that the same library work in #Node in the browser, AND with Custom Elements.

https://github.com/joist-framework/joist/tree/main/packages/di

#webcomponents #customelements #javascript

🚀 #Turbo listens to Turbo Streams like a toddler with a new toy: it just adds, removes, or rearranges things because it can. 🤖 Custom HTML elements are apparently magic wands that make website changes without asking if it’s a good idea. 🧙‍♂️ It's like giving a squirrel caffeine and watching it "organize" nuts. 🍂💨
https://ducktypelabs.com/how-does-turbo-listen-for-turbo-streams/ #TurboStreams #CustomElements #WebDevelopment #WebDesign #SquirrelCaffeine #HackerNews #ngated

cem v0.6.0 adds JSX support to the LSP server

github.com/bennypowers/cem/releases/tag/v0.6.0

cem is a command line tool for working with #customElements (#webComponents). It includes a custom elements manifest generator and validator, various query methods for manifests, and #LSP and #MCP servers

I love that you can expose a shadow part with multiple names using `exportparts`.

```html
<site-header exportparts=nav-list,nav-list:header-nav-list></site-header>
<site-footer exportparts=nav-list,nav-list:footer-nav-list></site-footer>
```

#HTML #CSS #CustomElements #ShadowDOM

Composition with the Shadow DOM is more powerful than you think. You can do a lot with the default named slot assignment, but manual slot assignment is a pathway to many abilities some consider to be… unnatural.</emperor-palpatine>

https://knowler.dev/blog/an-intro-to-manual-slot-assignment

#WebComponents #CustomElements #ShadowDOM #HTML #WebDev

New #cem release, the multitool for #customElements manifest files - make working with #webComponents a breeze!

github.com/bennypowers/cem/releases/tag/v0.4.5

This release adds a module graph to the LSP missing imports diagnostic.

Say you import the module that defines , and that module imports the definition for . Let's also say that the my-tab module imports the definition for . With this update, you'll no longer get errors for failing to import my-tab and my-icon, since they're included in my-tabs' module graph.

🚀 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
🪟 marketplace.visualstudio.com/items?itemName=pwrs.cem-language-server-vscode
#WebComponents #LSP #DeveloperTools #Lit #CustomElements #OpenSource #Go #TypeScript

Is it possible to make your custom elements use accent-color?

I was hoping there would be something like the currentcolor value but it doesn't look like it.

#css #webcomponents #customelements

Custom Elements are cool but I wish there was also a controller mechanism where I do <span controller="foo bar"> in HTML and elementControllers.define("foo", FooClass) and get the same lifecycle hooks as custom element but also a attach and detach hooks for when the controller gets added or removed from an object.

#webdev #html #javascript #customelements

github.com/bennypowers/cem/releases/tag/v0.1.0

bennypowers.github.io/cem

New CLI tool to generate #CustomElements manifests. It's 10x faster than the competition and can automatically document your parts and slots for you, as well as look up #designTokens in your #css files.

Give it a try, ⭐ the repo, file an issue, let me know what you think.

JSX-Syntax with Webcomponents.

https://positive-intentions.com/blog/dim-functional-webcomponents

I made something to try out and I'm working towards a UI framework for my personal projects. It's far from finished but perhaps this might be interesting to share.

#functional #webcomponents #javascript #html #css #web #components #library #webcomponents #customelements #lithtml #lit #polymer #OpenSource

If you build a custom element and it uses a child element with a CSS shadow part to expose its base styling, e.g. ::part(base), then this will be ignored if the custom element has content-visibility: auto.

So, if you want cards with box-shadow, the shadow styling has to be on the custom element itself, or :host, not the ::part() pseudo selector.

#css #webcomponents #customelements

Follow Me! #introduction

#oregon #pdx #pnw #portland #sanFrancisco #sf #arkansas #cannabis #coffee #cycling #bike #eBike #fungi #mushrooms #unreal #videoGames #gaming #vr #retroGaming #rg35xx #sega #web #css #developer #frontEnd #fullStack #html #javaScript #js #webApps #webDev #aws #customElements #cypress #devops #graphql #lit #pwa #react #reactjs #serverless #shadowDom #webComponents #web3 #activityPub #bitcoin #blockchain #btc #crypto #cryptocurrency #filecoin #helium #hnt #icp #ipfs

I'm not sure how search on Mastodon works, but if you're searching for #webcomponents #progressivewebapps #pwa #html #css #javascript #js #customelements #webapps #webdevelopment #chromeos #react #reactjs #graphql #ebikes #evs #portland #oregon #pdx #crypto #cryptocurrency #bitcoin #btc #icp #internetcomputer #icpeople #helium #hnt #ipfs then you should follow me!!!

I'd like to spend some more time with #WebComponents, #ServiceWorkers, #WebSockets, #OffscreenCanvas, #WebWorkers, #WebGPU, #SVG, and the #GamePad #API.

I've been noodling for a long time about how you could build a game using #ESModules, and #CustomElements to allow players to author their own components to extend the game.

I guess I'm just more interested in how the game works mechanically than how it looks.

#Development #Techniques
Managing reactive state using custom elements · Signals work great in custom elements too https://ilo.im/160x7y

_____
#Signals #WebComponents #CustomElements #Framework #Preact #WebDev #Frontend #DOM #HTML #JavaScript

What is the simplest and most lightweight vanilla implementation of reactivity that anyone has seen for #HTML #CustomElements / #WebComponents in #JS

Really like this approach of using a few focused features to create a workable solution for creating custom elements.
https://github.com/JimSchofield/minne

#webcomponents #customelements #lit

Starting to play around with Lit for a custom element project I’ve started, but I don’t think I can handle going back to class components after having experienced React hooks. The ability to extract complex behaviors into reusable hooks is just too useful. I would rather avoid class-based code where possible. #lithtml #customelements #WebComponents

One thing about web components that seems to take some people a while to grok is that a WC library like Lit is just an implementation detail, and from the outside it's all just standard HTML/DOM.

ie, you don't need to use Lit to instantiate Lit components. Plain DOM APIs work.

#webComponents #lit #webDev #javaScript #js #customElements #buildWithLit #frontend #html #dom #components

Just published #HydroActive v0.1.4 with #ShadowDOM support!

https://github.com/dgp1130/HydroActive/releases/tag/releases%2F0.1.4

Now you can call `host.shadow.query('...')` to easily scope a query to the shadow root of an element.

#Web #JavaScript #TypeScript #WebComponents #CustomElements

#WebComponentsAdvent Day 21: Case Studies.

Today's update is a list of real-world cases and stories shared by different teams who used #WebComponents in production. Do check it out especially if you consider using #CustomElements or #ShadowDOM in your project.

https://webcomponents.today/case-studies/

Using #DeclarativeShadowDOM to render placeholder content that gets replaced later as the #HTML #streams in with no #JavaScript!

https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/

This is an interesting technique, but it has limitations in that you can't close the #customElement until you've loaded the content.

#webDev #shadowDom #webComponents #customElements #http #streaming #web #frontend

Just published #HydroActive v0.1.4 with #ShadowDOM support!

https://github.com/dgp1130/HydroActive/releases/tag/releases%2F0.1.4

Now you can call `host.shadow.query('...')` to easily scope a query to the shadow root of an element.

#Web #JavaScript #TypeScript #WebComponents #CustomElements

Just published #HydroActive v0.1.4 with #ShadowDOM support!

https://github.com/dgp1130/HydroActive/releases/tag/releases%2F0.1.4

Now you can call `host.shadow.query('...')` to easily scope a query to the shadow root of an element.

#Web #JavaScript #TypeScript #WebComponents #CustomElements

Just published #HydroActive v0.1.4 with #ShadowDOM support!

https://github.com/dgp1130/HydroActive/releases/tag/releases%2F0.1.4

Now you can call `host.shadow.query('...')` to easily scope a query to the shadow root of an element.

#Web #JavaScript #TypeScript #WebComponents #CustomElements

Just published #HydroActive v0.1.4 with #ShadowDOM support!

https://github.com/dgp1130/HydroActive/releases/tag/releases%2F0.1.4

Now you can call `host.shadow.query('...')` to easily scope a query to the shadow root of an element.

#Web #JavaScript #TypeScript #WebComponents #CustomElements

I'd like to spend some more time with #WebComponents, #ServiceWorkers, #WebSockets, #OffscreenCanvas, #WebWorkers, #WebGPU, #SVG, and the #GamePad #API.

I've been noodling for a long time about how you could build a game using #ESModules, and #CustomElements to allow players to author their own components to extend the game.

I guess I'm just more interested in how the game works mechanically than how it looks.

I'd like to spend some more time with #WebComponents, #ServiceWorkers, #WebSockets, #OffscreenCanvas, #WebWorkers, #WebGPU, #SVG, and the #GamePad #API.

I've been noodling for a long time about how you could build a game using #ESModules, and #CustomElements to allow players to author their own components to extend the game.

I guess I'm just more interested in how the game works mechanically than how it looks.

I'd like to spend some more time with #WebComponents, #ServiceWorkers, #WebSockets, #OffscreenCanvas, #WebWorkers, #WebGPU, #SVG, and the #GamePad #API.

I've been noodling for a long time about how you could build a game using #ESModules, and #CustomElements to allow players to author their own components to extend the game.

I guess I'm just more interested in how the game works mechanically than how it looks.

I'd like to spend some more time with #WebComponents, #ServiceWorkers, #WebSockets, #OffscreenCanvas, #WebWorkers, #WebGPU, #SVG, and the #GamePad #API.

I've been noodling for a long time about how you could build a game using #ESModules, and #CustomElements to allow players to author their own components to extend the game.

I guess I'm just more interested in how the game works mechanically than how it looks.

`aria-labelledby` and `aria-describedby` attributes requiring IDs is but a one example of #accessibility being unaccessible to the dev like me. Only do you get a conflict in IDs for #ARIA and browser will choose to silently fail with the first occurence of element ID. Couldn't those be scoped CSS #selectors to actually make sense? I cannot willingly drag my hand and implant unique IDs on a whim: first thing, I have to come up with really witty names, another - mangle the markup of reusable component... wait.

Now that I think about it, maybe that's one superior use for #ShadowDOM over #LightDOM? Are #CustomElements getting more compatible with #a11y things with months to come? I wanna employ #WebComponents in #Kbin fork, but I need a strong reasoning for this.

`aria-labelledby` and `aria-describedby` attributes requiring IDs is but a one example of #accessibility being unaccessible to the dev like me. Only do you get a conflict in IDs for #ARIA and browser will choose to silently fail with the first occurence of element ID. Couldn't those be scoped CSS #selectors to actually make sense? I cannot willingly drag my hand and implant unique IDs on a whim: first thing, I have to come up with really witty names, another - mangle the markup of reusable component... wait.

Now that I think about it, maybe that's one superior use for #ShadowDOM over #LightDOM? Are #CustomElements getting more compatible with #a11y things with months to come? I wanna employ #WebComponents in #Kbin fork, but I need a strong reasoning for this.

`aria-labelledby` and `aria-describedby` attributes requiring IDs is but a one example of #accessibility being unaccessible to the dev like me. Only do you get a conflict in IDs for #ARIA and browser will choose to silently fail with the first occurence of element ID. Couldn't those be scoped CSS #selectors to actually make sense? I cannot willingly drag my hand and implant unique IDs on a whim: first thing, I have to come up with really witty names, another - mangle the markup of reusable component... wait.

Now that I think about it, maybe that's one superior use for #ShadowDOM over #LightDOM? Are #CustomElements getting more compatible with #a11y things with months to come? I wanna employ #WebComponents in #Kbin fork, but I need a strong reasoning for this.

`aria-labelledby` and `aria-describedby` attributes requiring IDs is but a one example of #accessibility being unaccessible to the dev like me. Only do you get a conflict in IDs for #ARIA and browser will choose to silently fail with the first occurence of element ID. Couldn't those be scoped CSS #selectors to actually make sense? I cannot willingly drag my hand and implant unique IDs on a whim: first thing, I have to come up with really witty names, another - mangle the markup of reusable component... wait.

Now that I think about it, maybe that's one superior use for #ShadowDOM over #LightDOM? Are #CustomElements getting more compatible with #a11y things with months to come? I wanna employ #WebComponents in #Kbin fork, but I need a strong reasoning for this.

`aria-labelledby` and `aria-describedby` attributes requiring IDs is but a one example of #accessibility being unaccessible to the dev like me. Only do you get a conflict in IDs for #ARIA and browser will choose to silently fail with the first occurence of element ID. Couldn't those be scoped CSS #selectors to actually make sense? I cannot willingly drag my hand and implant unique IDs on a whim: first thing, I have to come up with really witty names, another - mangle the markup of reusable component... wait.

Now that I think about it, maybe that's one superior use for #ShadowDOM over #LightDOM? Are #CustomElements getting more compatible with #a11y things with months to come? I wanna employ #WebComponents in #Kbin fork, but I need a strong reasoning for this.