Oh yeah. That one: accent-color can’t be accessed as a color keyword similar to currentColor. So I had to workaround with a css custom property, on customElements and styling. When better styling for inputs hits the stage, this might be useful. Not a biggie but inconsistent.
bsky.app/profile/mark...
bsky.app/profile/mark...
CSS tip: recolor every checkbox, radio and range slider with one line.
:root {
accent-color: #EA580C;
}
No custom markup, no hidden inputs. The browser even picks a readable checkmark color for you.
:root {
accent-color: #EA580C;
}
No custom markup, no hidden inputs. The browser even picks a readable checkmark color for you.
November 1, 2026 at 8:19 AM
Oh yeah. That one: accent-color can’t be accessed as a color keyword similar to currentColor. So I had to workaround with a css custom property, on customElements and styling. When better styling for inputs hits the stage, this might be useful. Not a biggie but inconsistent.
bsky.app/profile/mark...
bsky.app/profile/mark...
#Development #Analyses
Do web components have a future? · What remains of custom elements in the AI era ilo.im/16h5ci by Nolan Lawson
_____
#CustomElements #WebComponents #WebStandards #AI #Frameworks #React #WebDev #Frontend #HTML #JavaScript
Do web components have a future? · What remains of custom elements in the AI era ilo.im/16h5ci by Nolan Lawson
_____
#CustomElements #WebComponents #WebStandards #AI #Frameworks #React #WebDev #Frontend #HTML #JavaScript
Do web components have a future if nobody is writing them?
With my previous post on “using the platform”, I was surprised that the comments on Hacker News and Lobsters tended to veer toward web components. This…
ilo.im
October 20, 2026 at 6:01 AM
#Development #Analyses
Do web components have a future? · What remains of custom elements in the AI era ilo.im/16h5ci by Nolan Lawson
_____
#CustomElements #WebComponents #WebStandards #AI #Frameworks #React #WebDev #Frontend #HTML #JavaScript
Do web components have a future? · What remains of custom elements in the AI era ilo.im/16h5ci by Nolan Lawson
_____
#CustomElements #WebComponents #WebStandards #AI #Frameworks #React #WebDev #Frontend #HTML #JavaScript
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
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.
"Custom Elements" can easily include `customElements` with all other tools revolving around it with their own icons.
December 12, 2024 at 1:45 AM
"Custom Elements" can easily include `customElements` with all other tools revolving around it with their own icons.
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.
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
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.
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.
Cool stuff being built with custom HTML elements. #customelements
November 30, 2024 at 11:16 PM
Cool stuff being built with custom HTML elements. #customelements
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
One of my goals is to eventually connect this to Lume's custom HTML elements for 3D editing in web apps. #customelements
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
I wrote about managing complex reactive state in custom elements (web components) with event dispatch #webcomponents #customelements #signals #html nathanherald.com/posts/reacti...
🚀 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
🚀 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...
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
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
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
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
So the expectation is that there is some level of uniformity. There are a variety of workarounds going on which are not uncommon boilerplate to avoid scoping collisions. The basics of the mismatch is the following
1. It is using iframe customElements to do something akin to scoped registry
🧵
1. It is using iframe customElements to do something akin to scoped registry
🧵
December 3, 2024 at 1:10 AM
So the expectation is that there is some level of uniformity. There are a variety of workarounds going on which are not uncommon boilerplate to avoid scoping collisions. The basics of the mismatch is the following
1. It is using iframe customElements to do something akin to scoped registry
🧵
1. It is using iframe customElements to do something akin to scoped registry
🧵
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
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
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
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
Browser-native Custom Elements are awesome, why am I only learning about this now?! https://developers.google.com/web/fundamentals/web-components/customelements
Custom Elements v1 - Reusable Web Components | Articles...
Custom elements allow web developers to define new HTML t...
developers.google.com
November 19, 2024 at 12:27 PM
Browser-native Custom Elements are awesome, why am I only learning about this now?! https://developers.google.com/web/fundamentals/web-components/customelements
Custom elements in HTML are like 'squirrels in a trench coat,' allowing developers to create unique elements. Their distinct names with dashes set the…ffering creative flexibility. #CustomElements #WebDev watch @scottjehl.com from @webdirections.org Dev Summit '24. Watch More: bit.ly/4iM2Rch
April 11, 2025 at 4:55 AM
Custom elements in HTML are like 'squirrels in a trench coat,' allowing developers to create unique elements. Their distinct names with dashes set the…ffering creative flexibility. #CustomElements #WebDev watch @scottjehl.com from @webdirections.org Dev Summit '24. Watch More: bit.ly/4iM2Rch
The browser is the framework
#customelements #frontenddev #react #vuejs #svelte #angular
Crossposted with @openvibe.social
#customelements #frontenddev #react #vuejs #svelte #angular
Crossposted with @openvibe.social
July 4, 2026 at 6:55 AM
The browser is the framework
#customelements #frontenddev #react #vuejs #svelte #angular
Crossposted with @openvibe.social
#customelements #frontenddev #react #vuejs #svelte #angular
Crossposted with @openvibe.social
Цікаво, на мдн пише, що повна підтримка
https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements
https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements
July 18, 2023 at 2:07 PM
Цікаво, на мдн пише, що повна підтримка
https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements
https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements
Este sábado 27/09, Clase 12 del #curso de #javascript Vanilla.
Penúltima clase:
✔️ WebComponents / CustomElements.
✔️ Observadores (Mutation, Intersection)
11AM - Chatting, risas, dudas.
12PM - Tema nuevo.
Por Twitch: twitch.tv/PadawansTrai...
Y YouTube: youtube.com/live/1pneBdS...
Penúltima clase:
✔️ WebComponents / CustomElements.
✔️ Observadores (Mutation, Intersection)
11AM - Chatting, risas, dudas.
12PM - Tema nuevo.
Por Twitch: twitch.tv/PadawansTrai...
Y YouTube: youtube.com/live/1pneBdS...
Curso de Javascript Vanilla: Clase 12 - WebComponents y Observers | Desarrollo Web
YouTube video by German Rodriguez
youtube.com
September 25, 2025 at 4:00 PM
Este sábado 27/09, Clase 12 del #curso de #javascript Vanilla.
Penúltima clase:
✔️ WebComponents / CustomElements.
✔️ Observadores (Mutation, Intersection)
11AM - Chatting, risas, dudas.
12PM - Tema nuevo.
Por Twitch: twitch.tv/PadawansTrai...
Y YouTube: youtube.com/live/1pneBdS...
Penúltima clase:
✔️ WebComponents / CustomElements.
✔️ Observadores (Mutation, Intersection)
11AM - Chatting, risas, dudas.
12PM - Tema nuevo.
Por Twitch: twitch.tv/PadawansTrai...
Y YouTube: youtube.com/live/1pneBdS...
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...
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
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...
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...
Gecko: Intent to prototype: Scoped custom element registries
Gecko: Intent to prototype: Scoped custom element registries
Gecko: Intent to prototype: Scoped custom element registries
groups.google.com
November 20, 2024 at 6:25 PM
No, the CustomElements Registry is maintained by the Browser, not accesible with user script.
There is a proposal for Scoped Registries, and a polyfill:
www.npmjs.com/package/@web...
There is a proposal for Scoped Registries, and a polyfill:
www.npmjs.com/package/@web...
@webqit/webflo
The universal, fullstack JavaScript framework.. Latest version: 0.11.61-0, last published: 2 years ago. Start using @webqit/webflo in your project by running `npm i @webqit/webflo`. There are no other...
www.npmjs.com
March 18, 2025 at 9:10 AM
No, the CustomElements Registry is maintained by the Browser, not accesible with user script.
There is a proposal for Scoped Registries, and a polyfill:
www.npmjs.com/package/@web...
There is a proposal for Scoped Registries, and a polyfill:
www.npmjs.com/package/@web...
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
Had to update the
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
January 21, 2025 at 4:27 PM
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
Had to update the
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
じゃあ、使えないかというと、同じ仕組みをgetElementByIdで作ろうとすると、昔々のJavaScriptみたいに「this」でつらくなるので、クラスによくまとまっているというだけで、customElementsは優秀。
内部のIDを外部から隠蔽できるshadowDomは素晴らしい。
addEventListener DomContentLoadedとか書こうとするなら、componentのconstructorやconnectedCallbackの方がきれいに書ける。
attributeChangedCallbackはフレームワークなしでこれができるのは結構感動する
内部のIDを外部から隠蔽できるshadowDomは素晴らしい。
addEventListener DomContentLoadedとか書こうとするなら、componentのconstructorやconnectedCallbackの方がきれいに書ける。
attributeChangedCallbackはフレームワークなしでこれができるのは結構感動する
September 5, 2023 at 5:21 PM
じゃあ、使えないかというと、同じ仕組みをgetElementByIdで作ろうとすると、昔々のJavaScriptみたいに「this」でつらくなるので、クラスによくまとまっているというだけで、customElementsは優秀。
内部のIDを外部から隠蔽できるshadowDomは素晴らしい。
addEventListener DomContentLoadedとか書こうとするなら、componentのconstructorやconnectedCallbackの方がきれいに書ける。
attributeChangedCallbackはフレームワークなしでこれができるのは結構感動する
内部のIDを外部から隠蔽できるshadowDomは素晴らしい。
addEventListener DomContentLoadedとか書こうとするなら、componentのconstructorやconnectedCallbackの方がきれいに書ける。
attributeChangedCallbackはフレームワークなしでこれができるのは結構感動する