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

How To Dynamically Install Custom Elements: HeydonWorks

"Today, I want to look into one very specific topic in excruciating technical detail: how to dynamically load custom elements."

https://heydonworks.com/article/dynamically-loading-custom-elements/

#customelements #webcomponents #webdev

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