Alright, my fellow #WebComponents nerds, I've got something truly awesome coming your way very soon.
Administrado por:
#WebComponents
6 publicaciones6 participantes1 publicación hoy
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
ShopTalk · 675: Building Hot Page with Tim FarnamTim Farnam stops by to talk with Chris and Dave about his new project, Hot Page, and why and how he started building it after working in print and web news.
Web Components: Working With Shadow DOM. #WebComponents
https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/
Smashing Magazine · Web Components: Working With Shadow DOM — Smashing MagazineWeb Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader picture, explaining why it matters, when to use it, and how to apply it effectively.
#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
ilo.imVanilla JavaScript support for Tailwind PlusEvery UI block in Tailwind Plus is now fully functional, accessible, and interactive, even if you don't use a framework like React or Vue.
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/
That HTML Blog · More Fun with Invoker Commands and Web Components
Más de 
Jared White (
ally)
ally)
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
#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
ilo.imPublic CSS Custom Properties in the Shadow DOMThe definitive guide to using public CSS Custom properties to configure web components externally. Surely no one will ever write about this topic again.
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
GitHubGitHub - Tram-One/shadowroot-injector: 🪡 declaratively define shadowroots to repeat in HTML templates🪡 declaratively define shadowroots to repeat in HTML templates - Tram-One/shadowroot-injector
Respondió en el hilo
@judell hey, this is very interesting. The old VB UI in a new web jacket. I just tooted about the Rube Goldberg machine that is modern web dev, and in some ways I was more empowered at the start of my career in 1997 with Visual Basic.
https://social.coop/@smallcircles/114878688112419149
You might have a look if maybe there isn't a cool combination to make with #Datastar at https://data-star.dev which recently went v1.0
They continue where #HTMX stopped, in #hypermedia land, where they use #WebComponents for complex UI.
social.coopjust small circles 🕊 (@smallcircles@social.coop)The Rube Goldberg machine that is modern front-end development. "Make simple things complex again".
I have AstroJS/Starlight documentation site. It works. But hey, new versions everywhere in the deps tree. Gotta incorporate brand new incompatible Tailwind v4 config.
Simple change, just follow the docs, right?
Wrong. Dark mode no longer works and it is a mystery why. Need to go expert mode, delve in multiple issue trackers, code bases. A day passes..
On dark mode default feature being broken.
#Development #Techniques
Bulletproof web component loading · How to ensure they work predictably every time. https://ilo.im/1658l1
_____
#Reliability #Initialization #WebComponents #WebDev #Frontend #DOM #HTML #JavaScript
ilo.imBulletproof web component loadingToday, I wanted to talk about the “right” way to load web components to ensure they work predictably every time. Let’s dig in!
The challenge Web components are self instantiating.
Let’s imagine you’re creating a table of contents. When you use a traditional JavaScript library, you explicitly instantiate the library on a specific element.
<div id="toc"></div>const myTOC = new TableOfContents('#toc'); But with web components, all you need to do is include the custom element associated with the component.
I have a position open on my team at Adobe for a senior frontend focused developer with #webcomponents (preferably lit) experience!
Small team, building a new product as part of an incubation organization. Lots to do, and lots of interesting things to build!
https://careers.adobe.com/us/en/job/ADOBUSR157111EXTERNALENUS/Sr--Front-End-Engineer
Adobe · Sr. Front End Engineer in Seattle, Washington, United States of America | Design at AdobeApply for Sr. Front End Engineer job with Adobe in Seattle, Washington, United States of America. Design at Adobe
#Development #Reviews
Web Awesome is finally here · “Now we have the best CSS framework on the market.” https://ilo.im/165bqw
_____
#WebAwesome #Shoelace #OpenSource #CSS #Framework #UiComponents #WebComponents #WebAPIs #WebDev #Frontend
That HTML Blog · Web Awesome, the First All-in-One Web Components + CSS Framework, is Finally Here
Más de Jared White ( ally)
ally)Move over Bootstrap.
Web Awesome is an awesome successor to what in my opinion was already the best open source #WebComponents library (Shoelace) on the market. Now we have the best #CSS framework on the market.
All of the CSS is…um…just CSS and all of the components are…um…just web components. Native #WebDev APIs across the board. 
Take a first look at the brand new public beta:
https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/
That HTML Blog · Web Awesome, the First All-in-One Web Components + CSS Framework, is Finally Here
Más de Jared White ( ally)
ally)Respondió en el hilo
@leaverou These all power HTML in some way or other...
- Scoped Custom Element Registries
- Reference Target API
- elementInternals.type https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md
- Declarative CSS Modules and the adoptedstylesheets attribute https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md
- Declarative Partial Updates https://github.com/WICG/declarative-partial-updates
- DOM Parts
- Platform based windowing/virtualization
- <tabs>
I've got lots more for CSS/JS if you get signed up for those.
Good luck with the survey!
GitHubMSEdgeExplainers/ElementInternalsType/explainer.md at main · MicrosoftEdge/MSEdgeExplainersHome for explainer documents originated by the Microsoft Edge team - MicrosoftEdge/MSEdgeExplainers
The beta release of web awesome (formerly shoelace) is here and I am excited about all that cool web component stuff!
webawesome.comWeb AwesomeBuild better with Web Awesome, the open source library of web components from Font Awesome.
#Development #Previews
Kelp · A customizable UI library that needs no build step https://ilo.im/164ypi
_____
#Library #HTML #CSS #WebComponents #CDN #WebStandards #WebDev #Frontend
ilo.imKelpA UI library for people who love HTML, powered by modern CSS and Web Components.
#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
Justin FagnaniThe time is right for a DOM templating API
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/
lea.verou.me · Bluesky Likes Web Components • Lea VerouI set out to announce two components I wrote for displaying Bluesky likes and ended up ranting about the pain of building accessible, localizable web components in 2025. The components are still here, though — lucky you?
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