home.social

#customelements — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #customelements, aggregated by home.social.

  1. 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: positive-intentions.com/docs/r

    (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

  2. 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: positive-intentions.com/docs/r

    (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

  3. 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: positive-intentions.com/docs/r

    (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

  4. 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: positive-intentions.com/docs/r

    (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

  5. 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: positive-intentions.com/docs/r

    (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

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

    #html #customelements #accessibility

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

  8. 🚨 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

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

    github.com/joist-framework/joi

    #webcomponents #customelements #javascript

  10. 🚀 #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. 🍂💨
    ducktypelabs.com/how-does-turb #TurboStreams #CustomElements #WebDevelopment #WebDesign #SquirrelCaffeine #HackerNews #ngated

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

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

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

    knowler.dev/blog/an-intro-to-m

    #WebComponents #CustomElements #ShadowDOM #HTML #WebDev

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

  15. 🚀 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

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

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

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

  19. JSX-Syntax with Webcomponents.

    positive-intentions.com/blog/d

    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

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

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

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

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

    #webcomponents #customelements #lit

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

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

  26. Day 21: Case Studies.

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

    webcomponents.today/case-studi

  27. Just published v0.1.4 with support!

    github.com/dgp1130/HydroActive

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

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

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

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

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

  32. `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.

  33. `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.

  34. `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.

  35. `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.

  36. `aria-labelledby` and `aria-describedby` attributes requiring IDs is but a one example of being unaccessible to the dev like me. Only do you get a conflict in IDs for and browser will choose to silently fail with the first occurence of element ID. Couldn't those be scoped CSS 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 over ? Are getting more compatible with things with months to come? I wanna employ in fork, but I need a strong reasoning for this.