#CustomElements
LightNews LightNews
ted.dev
Creating custom HTML elements with #VanillaJS

#DevoxxUK @firt.dev
Max pointing to slide showing example code for Custom Elements (Left side of slide): class MyElement extends HTMLElement { constructor() { super(); customelements. define ("my-element", MyElement); (Right side of slide:) ‹body> </body> ‹my-element></my-element> < script> document.createElement ("my-element*); ‹/script>
May 8, 2025 at 8:43 AM
catapart.bsky.social
Another editor update: implemented dynamic component fields based on the property types, and set up two-way binding so that the transform controls and the inspector fields don't interfere with one another.
Getting closer!

#webdev #gamedev #indiegamedev #js #threejs #customelements #webcomponents
March 4, 2025 at 12:53 AM
lume.io
Hello! 👋
We present you HTML elements for crafting beautiful 3D web graphics 🪄✨, compatible with Vue, Svelte, Solid.js, Angular, Ember.js, React, Lit, Astro, and all web frameworks. 🛠️

#Lume #LumeHTML #CustomElements #Threejs #WebGL #3D #WebDesign #WebDevelopment #HTML
Lume. Web Graphics Made Easy
Create beautiful graphics on any website with simple HTML compatible with React, Vue, Svelte, Solid.js, Angular, and all web frameworks.
lume.io
March 14, 2025 at 1:48 AM
joe.trusktr.io
One of my goals is to eventually connect this to Lume's custom HTML elements for 3D editing in web apps. #customelements
November 30, 2024 at 8:31 AM
nathanherald.com
I wrote about managing complex reactive state in custom elements (web components) with event dispatch #webcomponents #customelements #signals #html nathanherald.com/posts/reacti...
How to manage reactive state using Custom Elements (Web Components)
nathanherald.com
November 19, 2024 at 11:40 PM
joe.trusktr.io
Cool stuff being built with custom HTML elements. #customelements
chrisshank.com 𝕮 @chrisshank.com · Nov 25
"make illegal states unconnectable" - @disconcision.com
November 30, 2024 at 11:16 PM
g12n.de
Setting up a documentation setup for utilizing #customElements manifest and @11ty.dev. Deeply satisfying. Though I wonder how to incorporate CSS only parts of the design system. With modern CSS and HTML many old JavaScript solutions simply became obsolete.
November 21, 2025 at 6:21 AM
iplayitofflegit.bsky.social
#webcomponent and #customelements hashtags added to Web Components Feed.

Enjoy 😊
April 28, 2024 at 10:58 PM
villetakanen.com
I just love the way #webcomponents simplify creating custom widgets.

My #BbtA / #BitD progress clock widget is in public alpha shape after just a couple of short coding sessions:
cyan-design-system.netlify.app/addons/cn-st...

#litjs #customelements #webdev #rpg
January 7, 2025 at 12:46 PM
emanuelsaramago.com
I just made a open source boilerplate class for webcomponents.

What do you think?

#javascript #webcomponents #customelements

baseelement.emanuelsaramago.com
Base Element
baseelement.emanuelsaramago.com
July 29, 2025 at 4:10 PM
inautilo.bsky.social
#Development #Guides
Installing custom elements dynamically · A reusable pattern for on-the-fly custom element loading ilo.im/169hh8 by Heydon Pickering

_____
#Loading #CustomElements #WebComponents #WebDev #Frontend #DOM #HTML #JavaScript
How To Dynamically Install Custom Elements
A reusable pattern for custom elements installation
ilo.im
January 2, 2026 at 9:11 PM
pablolarah.bsky.social
🧨 Elena
Creator: Ariel Salminen @ariel@front-end.social @arielsalminen.com
is a simple, tiny library (2.6kB) for building #ProgressiveWebComponents. Unlike most web component libraries, Elena doesn’t force #JavaScript for everything.
#css #html #WebComponents #CustomElements
#webdev
elenajs.com
Orange pink text on dark brown browser mockup: Elena Compiling Progressive Web Components...
March 31, 2026 at 4:17 PM
dutchcelt.com
This makes me very happy.
#webcomponents #customelements
November 20, 2024 at 6:25 PM
develwithoutacause.dwac.dev
Just released v0.1.7 of #HydroActive with the main new feature being support of the "On-Demand Definitions" community protocol I recently proposed. If you're interested to try it out, this is an easy way to give it a shot.

github.com/dgp1130/Hydr...

github.com/webcomponent...
Release releases/0.1.7 · dgp1130/HydroActive
BREAKING CHANGES: The defineSignalComponent and defineBaseComponent functions have been renamed to component and baseComponent respectively. The new versions do not immediately call customElements....
github.com
December 15, 2024 at 12:54 AM
tvdeyen.bsky.social
The browser is the framework

#customelements #frontenddev #react #vuejs #svelte #angular

Crossposted with @openvibe.social
July 4, 2026 at 6:55 AM
dutchcelt.com
Do you want a dynamic, responsive navigation?
What if you want zero config, no DOM manipulation, no attributes popping up?
Well, slot assignment, popovers, and anchor positioning, you can get it done. Okay, that's a lot. But, doable.

#CSS #webcomponents #customelements

codepen.io/dutchcelt/fu...
No config responsive menu
A Responsive Menu using slots for overflow. This uses slots for "moving" and thus avoids the need to alter the DOM directly with JavaScript. Also, with...
codepen.io
February 8, 2026 at 7:50 PM
joe.trusktr.io
No, but you said you "bundling CustomElements, with ShadowDOM was a HUGE mistake", and I took that as dislike of combination of those two things.
February 2, 2026 at 4:27 AM
aihackerjobs.bsky.social
🚀 Combinaut seeks a Frontend Developer to build WCAG‑compliant UI for its Sparkle healthcare platform. Remote. Tech: HTML, SCSS/SASS, Vue.js, Rails, WebComponents. Drive patient‑centric design! #Frontend #Remote #HealthcareTech #VueJS #Accessibility aihackerjobs.com/company/comb...
Frontend Developer - Combinaut · AI Hacker Jobs
Frontend Developer at Combinaut - HTML, SCSS, SASS, WCAG, Rails, Vue.js, WebComponents, CustomElements | Apply now on AIHackerJobs.com
aihackerjobs.com
December 31, 2025 at 2:49 PM
joe.trusktr.io
Can we take into consideration Custom Elements?

Because React components are web components too. So are Vue, Svelte, Angular, and Solid.js components.

Custom HTML Elements is a more clear way to teach people learning HTML.

The API name `customElements` nails it, with supporting APIs around it.
December 11, 2024 at 4:50 PM
bradleymeck.bsky.social
3. the @property is used in the iframe & style is valid but unlike the JS customElements upgrade it is lost when moved

My expectation is that both custom element & @property match when moved about. It's the inner element according to HTML but according to CSS it is the outer @property
December 3, 2024 at 1:10 AM
engelman.nl
A year older, and wiser

Had to update the Web Component today

Couldn't resist to add an extra default counter: event="48"

added the FlagMeister Web Component for flag effect

event-count.github.io

flagmeister.github.io

#webcomponents #webcomponent #customelement #customelements
<event-count> Web Component, displaying a countdown to 2029-1-20
January 21, 2025 at 4:27 PM
auferbauer.net
It always bothers me when #customelements (of #webcomponents) have their #HTML and #CSS defined inline as #JS code. So, I created a starter repo to showcase a different approach with #webpack: github.com/FuzzyLogicLl...
GitHub - FuzzyLogicLlama/webcomponent-soc-webpack: Provides a minimal webpack starter for splitting custom elementdefinitions of web components into separate JS, HTML, and CSS files. It uses webpack's...
Provides a minimal webpack starter for splitting custom elementdefinitions of web components into separate JS, HTML, and CSS files. It uses webpack&#39;s html-loader and css-loader to import HTML a...
github.com
December 16, 2024 at 9:25 AM
inautilo.bsky.social
#Development #Templates
Web component starter template · The essentials to ship production-ready components ilo.im/169jml by Aaron Gustafson

_____
#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...
ilo.im
January 5, 2026 at 2:48 PM