Because the world should be a slightly better place, and that includes the often greater that 1/3 of my week where working is happening, let people know how you feel about HTML at https://survey.devographics.com/en-US/survey/state-of-html/2025/ Future us's will thank us.

Anatomy of a Web Component: "JavaScript bros would be shocked how far custom elements can take you at a fraction of the cost. But they’re too busy gaslighting themselves into believing a VC funded nightmare is essential. We know better!" #WebComponents https://dbushell.com/2025/08/01/anatomy-of-a-web-component/

If any of you are headed to KCDC next week and come to my #WebComponents workshop or session, you will get a sneak peak at something awesome that's coming soon!

https://www.kcdc.info/

Today I realized: unconditionally setting the display property in a :host rule overrides the effect of the global hidden (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/hidden) attribute. This is... bad!

#Development #Collections
HotFX · A collection of well-crafted web components https://ilo.im/165u3y

_____
#WebComponents #Website #DesignPattern #Design #WebDesign #WebDev #Frontend #HTML #JavaScript

I also have a silly web components question...

If I choose a helper library like #LitHtml and make some component. Say like a button. And I want to make it portable to different projects / contexts.

Is it possible with some tool to "compile" it back to a vanilla web-component again? Or would it only be "portable" to some other context if you also handed over the dependency on Lit?

Web Components: Working With Shadow DOM, by @smashingmag:

https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/

Public #CSS Custom Properties in the Shadow DOM: "The definitive guide to using public CSS Custom properties to configure #WebComponents externally. Surely no one will ever write about this topic again." https://michaelwarren.dev/blog/css-variables-in-wc/

Alright, my fellow #WebComponents nerds, I've got something truly awesome coming your way very soon.

Exciting episode of @shoptalkshow this week. We had Tim Farnam creator of @HotPage, a drag n' drop site builder with a focus on semantic HTML. It's also powered by #webcomponents.

: https://shoptalkshow.com/675/
: https://www.youtube.com/watch?v=njxLB82t3kA

Simon Duhem et Nicolas Jouanno Daniel vous inviteront à explorer les défis de l'accessibilité des web components avec le Shadow DOM et comment le RGAA et les outils d’audit pourraient évoluer.

https://www.paris-web.fr/2025/conference/les-web-components-et-laccessibilite

Web Components: Working With Shadow DOM. #WebComponents
https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/

#Development #Releases
Tailwind Plus adds vanilla JavaScript support · UI blocks no longer require a JavaScript framework https://ilo.im/165nit

_____
#TailwindCSS #DesignPatterns #WebComponents #JavaScript #Frameworks #WebDev #Frontend #HTML #CSS

The Invoker Commands API is the new hotness for a declarative #HTML solution to the problem “click and see something happen!!”

However…

If we’re inside shadow DOM and the button being clicked is supposed to do a thing via its host component, then uh, nope.

Thankfully there’s always a workaround in the Wide World of the Web, so I’ve written it up and here it is!

Yay for building directly on top of platform mechanics. #JavaScript #WebComponents #WebDev

https://thathtml.blog/2025/07/more-fun-with-invoker-commands-web-components/

We all want our design system components to be pretty; they represent the expression of the brand! But how much should they self-manage or reach out of themselves and manage peers in the DOM? What are your thoughts?

Pretty and dumb or pretty and highly capable?

I’m about to dive into custom HTML tags/elements and web components. Any recommendations for standards, posts or articles to read before I embark on this “journey”?
#webdev #webdesign #webcomponents

Received some feedback from a team using the Custom Element library for an Enterprise Design System I've been working on. Some cross-component lifecycle adjustments were necessary to enhance React compatibility. The nice part was that they also mentioned their (React 19) application was much faster with custom elements, both perceptually and measurably (using Lighthouse).

#Development #Guides
Public CSS variables in the shadow DOM · How to expose them in web components https://ilo.im/165h87

_____
#CustomProperties #WebComponents #ShadowDOM #API #Accessibility #WebDev #Frontend #CSS #JavaScript

After a long while tinkering with smaller and smaller ways to build re-usable pieces of HTML, I've landed on something that is simple, and uses the browsers built-in abilities to upgrade elements.

Introducing "ShadowRoot Injector"
https://github.com/Tram-One/shadowroot-injector

ShadowRoot Injector is a way to declaratively define HTML, that will automatically insert when custom elements appear in the DOM.

Check out the link and examples, and let me know what y'all think!
#WebComponents #HTML #ShadowDOM #WebDev