TechHub

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Releases" class="mention hashtag" rel="nofollow noopener" target="_blank">#Releases</a> Tailwind Plus adds vanilla JavaScript support · UI blocks no longer require a JavaScript framework <a href="https://ilo.im/165nit" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/165nit</a>_____ <a href="https://mastodon.social/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#TailwindCSS</a> <a href="https://mastodon.social/tags/DesignPatterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#DesignPatterns</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/Frameworks" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frameworks</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

That HTML Blog & The Spicy WebThe Invoker Commands API is the new hotness for a declarative <a href="https://intuitivefuture.com/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> 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. 👏 <a href="https://intuitivefuture.com/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://intuitivefuture.com/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://intuitivefuture.com/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a><a href="https://thathtml.blog/2025/07/more-fun-with-invoker-commands-web-components/" rel="nofollow noopener" translate="no" target="_blank">https://thathtml.blog/2025/07/more-fun-with-invoker-commands-web-components/</a>

castastropheWe 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?<a href="https://front-end.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://front-end.social/tags/designsystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#designsystems</a>

Dawn AhukannaI’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”? <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdesign</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

Brent Lineberry“The second the browser hits that `<table-of-contents>` component, the JavaScript for it executes. It does this before it’s even loaded the child elements inside the component.”I’ve run into this at least once before, and I’m sure this is a better solution than whatever hack I implemented at the time.(via Jeremy Keith)<a href="https://gomakethings.com/bulletproof-web-component-loading/" rel="nofollow noopener" translate="no" target="_blank">https://gomakethings.com/bulletproof-web-component-loading/</a><a href="https://mastodon.online/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDevelopment</a> <a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a>

Eda📝 New blog post: A short glimpse into web components and Lit<a href="https://rivea0.github.io/blog/a-short-glimpse-into-web-components-and-lit" rel="nofollow noopener" translate="no" target="_blank">https://rivea0.github.io/blog/a-short-glimpse-into-web-components-and-lit</a>Come to think of it, maybe not so short.<a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#Lit</a>

Egor KloosReceived 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). <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://mastodon.social/tags/designsystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#designsystems</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener" target="_blank">#Guides</a> Public CSS variables in the shadow DOM · How to expose them in web components <a href="https://ilo.im/165h87" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/165h87</a>_____ <a href="https://mastodon.social/tags/CustomProperties" class="mention hashtag" rel="nofollow noopener" target="_blank">#CustomProperties</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> <a href="https://mastodon.social/tags/API" class="mention hashtag" rel="nofollow noopener" target="_blank">#API</a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#Accessibility</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Austin AndrewsIn-between adding keyboard navigation features I started to implement drag and drop for this tree web component.CSS Variables on these recursive web components cuts down a lot of JS.<a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://fosstodon.org/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

Jesse JurmanAfter 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" 🎉 <a href="https://github.com/Tram-One/shadowroot-injector" rel="nofollow noopener" translate="no" target="_blank">https://github.com/Tram-One/shadowroot-injector</a>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! <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://fosstodon.org/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> <a href="https://fosstodon.org/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a>

just small circles 🕊<a href="https://social.coop/@judell" class="u-url mention" rel="nofollow noopener" target="_blank">@judell</a> 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.<a href="https://social.coop/@smallcircles/114878688112419149" rel="nofollow noopener" translate="no" target="_blank">https://social.coop/@smallcircles/114878688112419149</a>You might have a look if maybe there isn't a cool combination to make with <a href="https://social.coop/tags/Datastar" class="mention hashtag" rel="nofollow noopener" target="_blank">#Datastar</a> at <a href="https://data-star.dev" rel="nofollow noopener" translate="no" target="_blank">https://data-star.dev</a> which recently went v1.0They continue where <a href="https://social.coop/tags/HTMX" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTMX</a> stopped, in <a href="https://social.coop/tags/hypermedia" class="mention hashtag" rel="nofollow noopener" target="_blank">#hypermedia</a> land, where they use <a href="https://social.coop/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> for complex UI.

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#Techniques</a> Bulletproof web component loading · How to ensure they work predictably every time. <a href="https://ilo.im/1658l1" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/1658l1</a>_____ <a href="https://mastodon.social/tags/Reliability" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reliability</a> <a href="https://mastodon.social/tags/Initialization" class="mention hashtag" rel="nofollow noopener" target="_blank">#Initialization</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#DOM</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

Frontend DogmaBulletproof Web Component Loading, by <a href="https://mastodon.social/@cferdinandi" class="u-url mention" rel="nofollow noopener" target="_blank">@cferdinandi</a>:<a href="https://gomakethings.com/bulletproof-web-component-loading/" rel="nofollow noopener" translate="no" target="_blank">https://gomakethings.com/bulletproof-web-component-loading/</a><a href="https://mas.to/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://mas.to/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a>

Burton SmithThe JSX type generator now generates types for the <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> custom properties for your <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a>!<a href="https://wc-toolkit.com/integrations/jsx/" rel="nofollow noopener" translate="no" target="_blank">https://wc-toolkit.com/integrations/jsx/</a>

CSS BasicsBulletproof Web Component Loading: "Today, I wanted to talk about the 'right' way to load <a href="https://hachyderm.io/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> to ensure they work predictably every time. Let’s dig in!" <a href="https://gomakethings.com/bulletproof-web-component-loading/" rel="nofollow noopener" translate="no" target="_blank">https://gomakethings.com/bulletproof-web-component-loading/</a>

Peter Kröner"Croissant! Building a No-Framework Web App" by <a href="https://social.lol/@db" class="u-url mention" rel="nofollow noopener" target="_blank">@db</a>👉 <a href="https://dbushell.com/2025/07/11/croissant-no-framework-web-app/" rel="nofollow noopener" translate="no" target="_blank">https://dbushell.com/2025/07/11/croissant-no-framework-web-app/</a>The only thing missing from the article is the benefits: no more breakage due to dependency upgrades/ecosystem peer pressure and improved performance. Especially great for side projects—no more byte rot when the project inevitably gets put on the back burner for a few months.<a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

Burton SmithI put together a simple PR to try to improve the <a href="https://programming.dev/c/angular" class="u-url mention" rel="nofollow noopener" target="_blank">@angular</a> / <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> validation. This would let you be more specific about which components get excluded from validation instead of everything.I'm working on the custom element validation piece of it later.<a href="https://github.com/angular/angular/pull/62638" rel="nofollow noopener" translate="no" target="_blank">https://github.com/angular/angular/pull/62638</a>

Ben DelarreI have a position open on my team at Adobe for a senior frontend focused developer with <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> (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!<a href="https://careers.adobe.com/us/en/job/ADOBUSR157111EXTERNALENUS/Sr--Front-End-Engineer" rel="nofollow noopener" translate="no" target="_blank">https://careers.adobe.com/us/en/job/ADOBUSR157111EXTERNALENUS/Sr--Front-End-Engineer</a><a href="https://mastodon.social/tags/getfedihired" class="mention hashtag" rel="nofollow noopener" target="_blank">#getfedihired</a> <a href="https://mastodon.social/tags/lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#lit</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a>

Austin AndrewsCleaning up some of the components for an upcoming project.Fun getting all the keyboard interactions working as expected. Multiselect was pretty quick but now to add drag and drop which also has to work with multi-select.<a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Reviews" class="mention hashtag" rel="nofollow noopener" target="_blank">#Reviews</a> Web Awesome is finally here · “Now we have the best CSS framework on the market.” <a href="https://ilo.im/165bqw" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/165bqw</a>_____ <a href="https://mastodon.social/tags/WebAwesome" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebAwesome</a> <a href="https://mastodon.social/tags/Shoelace" class="mention hashtag" rel="nofollow noopener" target="_blank">#Shoelace</a> <a href="https://mastodon.social/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenSource</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/Framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#Framework</a> <a href="https://mastodon.social/tags/UiComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#UiComponents</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/WebAPIs" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebAPIs</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Frontend</a>

Recent searches

Search options

Administered by:

Server stats:

#webcomponents