xoron Mar 16

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

Show threadwestbrookFeb 24

@patrickbrosset Great to see the Chromium family join #webkit in support of this! 🥳

https://caniuse.com/wf-scoped-custom-element-registries is gonna be full up of awesomeness before too much longer 😁

#webComponents #webComponentsCG #customElements #webDev

Scoped custom element registries | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Jens Oliver MeiertJan 12

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

#html #customelements #accessibility

yes, this is true
10%
yes, but planned
0%
no, never a thing
80%
no, was dropped
10%
Poll ended at .
Tony MottazJan 6
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 
InautiloJan 5

#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

A Production-Ready Web Component Starter Template :: Aaron Gustafson

Creating a new web component from scratch involves a lot of boilerplate—testing setup, build configuration, linting, CI/CD, documentation structure, and more. After building — and refining/rebuilding — numerous web components, I’ve distilled all that work into a starter template that lets you focus on your component’s functionality rather than project setup.

InautiloJan 2

#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

lmorchard's linksDec 30
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
How To Dynamically Install Custom Elements

A reusable pattern for custom elements installation

HeydonWorks
lmorchard's linksDec 19
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
The handleEvent() method is the absolute best way to handle events in Web Components

Yesterday, I wrote about how I handle event binding in my Web Components, and it sparked a lot of great conversation on Mastodon! 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. Let’s dig in! What is the handleEvent() method? The handleEvent() method is part of the EventListener API, and has been around for decades.

lmorchard's linksDec 19
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
My HTML Web Component boilerplate for 2026

My digital garden has an entire section with copy/paste code snippets and boilerplates. I use these nearly every day when writing code. It helps me start working faster, and saves me from having to rewrite the same code over-and-over again. 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.

Hacker NewsDec 4

Building optimistic UI in Rails (and learn custom elements)

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

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

Building optimistic UI in Rails (and learn custom elements)

Learn how custom elements work in Rails by building an optimistic form. From simple counters to instant UI updates, understand when to use custom elements over Stimulus controllers.

Rails Designer