Admin Bar Component got a tiny facelift this weekend and I’d love to hear feedback. The point of this update is to make Admin Bar feel a little better on the page, instead of only full-width across the viewport.

Check out the new look here:

https://wbrowar.com/web-components/admin-bar-component

In custom elements, is it best to create one MutationObserver that handles every instance of the custom element or observers per instance, then set up and tear down the observer inside the custom element lifecycle? The target would be the custom element itself (or something within its shadow tree). #WebComponents #WebPerf

Admin Bar Component 1.5.4 is out!

In light of the Apple Glass stuff I learned about CSS’s `prefers-reduced-transparency` and applied it to the glassy background of Admin Bar Component.

#webcomponents #css #glass

https://github.com/wbrowar/admin-bar-component

The beta release of web awesome (formerly shoelace) is here and I am excited about all that cool web component stuff!

https://webawesome.com/

#Development #Previews
Kelp · A customizable UI library that needs no build step https://ilo.im/164ypi

_____
#Library #HTML #CSS #WebComponents #CDN #WebStandards #WebDev #Frontend

Qu'est-ce que le shadow DOM ?

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

#Development #Proposals
Declarative templating API proposal · “The time is right for a DOM templating API.” https://ilo.im/164yqf

_____
#Templating #DOM #API #Frameworks #WebComponents #WebPlatform #WebDev #Frontend #HTML #JavaScript

Thinking about #vibecoding an implementation of #VRML in #webComponents

Bluesky Likes Web Components: "I set out to announce two components I wrote for displaying Bluesky likes and ended up ranting about the pain of building accessible, localizable #WebComponents in 2025. The components are still here, though — lucky you?" https://lea.verou.me/blog/2025/bluesky-likes/

Web components compadres, what is your favorite way to style your web components? Thinking about techniques that consider customizability and CSS developer experience, as well as performance. Share with me your favorite libraries and tell me why you like their approach! #webcomponents #styling #designsystems

As promised, here is a post on subclassing `Event` to create truly custom #JavaScript events. I'm excited to explore this space a bit more for creating specialized events, not just for #WebComponents.

https://dev.to/stuffbreaker/creating-truly-custom-events-for-web-components-5bp5

#TIL - https://lordicon.com/docs/web #icons #opensource #webcomponents

Based on a conversation yesterday about custom events, I was playing around with strongly typing events for #WebComponents and decided to do a little write-up on it.

#html #javascript
https://dev.to/stuffbreaker/creating-strongly-typed-events-for-web-components-1jem

Another attempt at customized built-ins! Basically class CustomButton extends NativeButton (but with a less obvious API of course)

Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md

Intent to prototype in Blink: https://groups.google.com/a/chromium.org/g/blink-dev/c/6srW418CDgs/m/HWEB0fS5AQAJ

#Development #Techniques
Bluesky likes · Accessible, localizable web components are still a challenge https://ilo.im/164qhh

_____
#WebComponents #Accessibility #Localization #SocialMedia #Content #WebDev #Frontend #HTML #JavaScript #API

Turns out that slotted elements _inherit_ from their slots.

https://codepen.io/SirPepe/pen/qEdMXVE?editors=1000

Was about to complain about manual slot assignment in #webcomponents being a chore. But then I noticed that https://www.npmjs.com/package/@sirpepe/ornament already solves all my gripes ¯\_(ツ)_/¯

thanks to a discussion on reddit [1] and some links [2] I came across a different view on #webcomponents.
In short, just wrap content in a #webcomponent instead of trying to "upgrade" it. Like so:

<user-avatar>
<img src>
</user-avatar>

I always thought until now that it should rather be

<img src is=user-avatar>

but `is` is not widely usable.
I still need to digest it. I see the use cases, but somehow feels still strange

[1] https://www.reddit.com/r/HTML/comments/1ldt5s4/spaish_upgrading_the_details_element/
[2] https://adactio.com/journal/20618