I’m excited to announce the 1̶s̶t̶ 7th release candidate of Elena today! 🫶
Elena is a simple, tiny library for building Progressive Web Components. Unlike most web component libraries, Elena doesn’t force JavaScript for everything.
Crafted with love and care using HTML, CSS & plain JS: elenajs.com
We don’t really have a design perspective at the moment on how spinners could have labels associated with them, so I don’t want to bake it in. For non-visual text we have a label property.
Huh, my read of this was that they don’t, but I think I misunderstood. Ok this looks like what I was hoping for!
You’ve posted enough to make me hyped haha. So I guess we’ll see!
Today I was thinking about how we could have visual text alongside a loading spinner without baking it into the component. I think the only option is to aria hide the displayed text, and pass the same test to the spinner?
Hey web component world, how do you set-up WCs to support `aria-labelledby` for elements in the shadow DOM? I know there's a number of specs and proposals to address this, but I wonder what solutions we have now
Currently we require a string of text for labels, not el references. Maybe that's fine?
I'm very excited for the launch, but I'm also very scared that it's going to make me want to rewrite all of my components 🤩😨
It seems we can now customize the select element, right? right?!
Demo: codepen.io/t_afif/pen/P... via @codepen.io
Is there a Bluesky filter for profiles with anime avatars?
The React Foundation has officially launched, hosted by the Linux Foundation. Read more here: react.dev/blog/2026/02...
Interesting! Was the DX so bad that you stopped working on it?
I didn’t realize what the issue was because I was quickly scanning the diagram. Then I started reading the text. Wow.
The obvious and complete lack of copy-editing and QA is more depressing to me than using AI to write this.
It would be nice if @bsky.app added hyperlinks to users handles if their a URL. Seems funny to use one’s website as a handle but then you can’t click it.
The blip of nothing visible is more apparent when more of the app is styled light DOM, the web components load in very delayed in those cases
There’s a state unique to DSD where you could have a styled, undefined element. In our case, we want to show the element, even if it’s not defined yet, for perceived performance.
Yes, but this will short circuit the timeout. The goal is to show the user the UI as quickly as styles are available. You otherwise have to fiddle with the timeout length to be long enough not to show unstyled content, but not long enough to delay the UI
It's nothing fancy, it just overrides the animation, in case it hasn't resolved yet. It supports when you render undefined custom elements with declarative shadow DOM.
:host(:not(:defined)) {
visibility: visible !important;
}
We adopted this and works great in testing. For declarative shadow DOM, I also added a rule that overrides the hidden state, so it’ll display before it’s defined (since it then has styles) scottjehl.com/posts/web-co...
It's really sad that Chrome laid off one of the world's best CSS developer-designers, and now they have to fake demos of web features. youtu.be/d8J0vs-bEPE?...
... it's working great. But now I miss the benefits of utilities in Lit's ecosystem, and in some cases would benefit batching when some logic can get run multiple times when many properties update.
I made the element have an near identical API to Lit though, so it's not impossible to switch back
I keep going back and forth on this at work. We started with ReactiveElement since we don't use JS templating. But then sometimes the async reactive lifecycle feels heavy-handed when all of the DOM updates are imperative.
I recreated a similar base el with preact signals and... (tbc)
Ok
I miss Rdio.
Yesterday at TPAC I publicized my draft proposal for adding a declarative templating API to the DOM.
github.com/justinfagnan...
The repo has:
📖 Explainers for the templating API and DOM scheduler API
🏗️ Full prototype implementations
⚗️ a JSX transform
⚛️ a mini React-like framework
Declarative Shadow DOM and Declarative Custom Elements sound so good, but I still wish there was a way to do progressive enhancement with them to "hoist" form controls in a shadow root up into a parent form.
github.com/whatwg/html/...
We’re using BEM and host selectors like :host(component-name) to prevent collisions. I guess you could include something like tailwind if you want the utility class approach. But you’d probably need :host() and ::slotted() at some point
To avoid FOUC, we have all of the elements set to visibility: hidden in the global document, then the shadow DOM stylesheet will override that and make them visible.
For any elements CSR'd after page load, we use that same stylesheet as a CSSStylesheet (or <style> if browser doesn't support)
As mentioned in another thread, we're using a link tag pointing to an external stylesheet. For build simplicity and caching, we have one stylesheet for the entire component library. So browsers should only fetch the stylesheet for the first component.
