#customelements — Public Fediverse posts

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

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

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 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 #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

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