The handleEvent() method is the absolute best way to handle events in Web Components | Go Make Things

"A bunch of people shared their own approaches, but the one that absolutely blew my mind was the handleEvent() method, a platform-native method for managing all of the events on your Web Component."

https://gomakethings.com/the-handleevent-method-is-the-absolute-best-way-to-handle-events-in-web-components/

#customelements #js #web #webcomponents #webdev

My HTML Web Component boilerplate for 2026 | Go Make Things

"I created web component boilerplate years ago. Since then, my approach to writing web component has changed quite a bit.

I just updated the boilerplate, adding everything I’ve learned from working on Kelp UI. Today, I wanted to explain how it works."

https://gomakethings.com/my-html-web-component-boilerplate-for-2026/

#customelements #web #webcomponends #webdev

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

In the last ~6 months someone linked to their blog about using JS-free custom elements for page structure and style in place of a methodology like BEM, e.g. using `<my-element>`/`my-element {}` instead of `<div class="my-element">`/`.my-element {}`. Might have referenced [HUG CSS](https://gomakethings.com/hug-css-how-i-approach-css-architecture/) as well. I'm sure I bookmarked it but I'll be darned if I can find it again. Pointers please?

[update: found it, or close enough. https://mastodon.peterjanes.ca/@me/115653576216161384]

#customElements #webComponents #css

Custom Asidenotes – Eric’s Archived Thoughts

"Previously on meyerweb, I crawled through a way to turn parenthetical comments into sidenotes, which I called “asidenotes”. As a recap, these are inline asides in parentheses, which is something I like to do. The constraints are that the text has to start inline, with its enclosing parentheses as part of the static content, so that the parentheses are present if CSS isn’t applied, but should lose those parentheses when turned into asidenotes, while also adding a sentence-terminating period ..."

https://meyerweb.com/eric/thoughts/2025/10/29/custom-asidenotes/

#customelements #metablogging #webcomponents #webdev

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

Does anyone have a favorite #WebComponent that validates at least one of a group of checkbox inputs is checked?

#WebComponents #HTML #CustomElements

Okay I wonder.
Is there a web component which is like a `<select>` but allows me to have divs/spans as options?

#javascript #webcomponents #CustomElements

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

Je suis entrain de retaper, au taff, une sorte de DesignSystem maison, migrer de vue JS aux customElements.
Franchement c'est as mal fun, ça se fait bien, c'est plutôt sympa à faire.

Bon je ne suis pas au bout de mes peines, mais ça a un côté plus compréhensible, plus abordable et ça semble tellement plus perenne dans le temps aussi.

#html #js #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.

@LorenzKahl @jensimmons @mozilla I don't spend much time looking into Reader Mode, so I've not noticed this. When you're delivering content via DSD, are you later upgrading those #customElements or simply using #declarativeShadowDOM? The influence of JS in that area would surprise me less, even if it were still not the optimal behavior in that case...

😅