techhub.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A hub primarily for passionate technologists, but everyone is welcome

Administered by:

Server stats:

4.6K
active users

#webcomponents

10 posts10 participants1 post today
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Releases" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Releases</span></a><br>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"><span class="invisible">https://</span><span class="">ilo.im/165nit</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TailwindCSS</span></a> <a href="https://mastodon.social/tags/DesignPatterns" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignPatterns</span></a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.social/tags/Frameworks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frameworks</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
That HTML Blog & The Spicy Web<p>The 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">#<span>HTML</span></a> solution to the problem “click and see something happen!!”</p><p>However…</p><p>If we’re inside shadow DOM and the button being clicked is supposed to do a thing via its host component, then uh, nope. 🤨</p><p>Thankfully there’s always a workaround in the Wide World of the Web, so I’ve written it up and here it is!</p><p>😁 Yay for building directly on top of platform mechanics. 👏 <a href="https://intuitivefuture.com/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://intuitivefuture.com/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://intuitivefuture.com/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a></p><p><a href="https://thathtml.blog/2025/07/more-fun-with-invoker-commands-web-components/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">thathtml.blog/2025/07/more-fun</span><span class="invisible">-with-invoker-commands-web-components/</span></a></p>
castastrophe<p>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?</p><p>Pretty and dumb or pretty and highly capable?</p><p><a href="https://front-end.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a> <a href="https://front-end.social/tags/designsystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designsystems</span></a></p>
Dawn Ahukanna<p>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”?<br><a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdesign</span></a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a></p>
Brent Lineberry<p>“The second the browser hits that `&lt;table-of-contents&gt;` component, the JavaScript for it executes. It does this before it’s even loaded the child elements inside the component.”</p><p>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.</p><p>(via Jeremy Keith)</p><p><a href="https://gomakethings.com/bulletproof-web-component-loading/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">gomakethings.com/bulletproof-w</span><span class="invisible">eb-component-loading/</span></a></p><p><a href="https://mastodon.online/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a> <a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a></p>
Eda<p>📝 New blog post: A short glimpse into web components and Lit</p><p><a href="https://rivea0.github.io/blog/a-short-glimpse-into-web-components-and-lit" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">rivea0.github.io/blog/a-short-</span><span class="invisible">glimpse-into-web-components-and-lit</span></a></p><p>Come to think of it, maybe not so short.</p><p><a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Lit</span></a></p>
Egor Kloos<p>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). </p><p><a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a> <a href="https://mastodon.social/tags/designsystems" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>designsystems</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Guides</span></a><br>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"><span class="invisible">https://</span><span class="">ilo.im/165h87</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/CustomProperties" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CustomProperties</span></a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ShadowDOM</span></a> <a href="https://mastodon.social/tags/API" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>API</span></a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Accessibility</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a></p>
Austin Andrews<p>In-between adding keyboard navigation features I started to implement drag and drop for this tree web component.</p><p>CSS Variables on these recursive web components cuts down a lot of JS.</p><p><a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://fosstodon.org/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
Jesse Jurman<p>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.</p><p>Introducing "ShadowRoot Injector" 🎉<br><a href="https://github.com/Tram-One/shadowroot-injector" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/Tram-One/shadowroot</span><span class="invisible">-injector</span></a></p><p>ShadowRoot Injector is a way to declaratively define HTML, that will automatically insert when custom elements appear in the DOM. 🪡</p><p>Check out the link and examples, and let me know what y'all think!<br><a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://fosstodon.org/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ShadowDOM</span></a> <a href="https://fosstodon.org/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a></p>
just small circles 🕊<p><span class="h-card" translate="no"><a href="https://social.coop/@judell" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>judell</span></a></span> 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.</p><p><a href="https://social.coop/@smallcircles/114878688112419149" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">social.coop/@smallcircles/1148</span><span class="invisible">78688112419149</span></a></p><p>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">#<span>Datastar</span></a> at <a href="https://data-star.dev" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">data-star.dev</span><span class="invisible"></span></a> which recently went v1.0</p><p>They continue where <a href="https://social.coop/tags/HTMX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTMX</span></a> stopped, in <a href="https://social.coop/tags/hypermedia" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hypermedia</span></a> land, where they use <a href="https://social.coop/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> for complex UI.</p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Techniques</span></a><br>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"><span class="invisible">https://</span><span class="">ilo.im/1658l1</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Reliability" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Reliability</span></a> <a href="https://mastodon.social/tags/Initialization" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Initialization</span></a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DOM</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a></p>
Frontend Dogma<p>Bulletproof Web Component Loading, by <span class="h-card" translate="no"><a href="https://mastodon.social/@cferdinandi" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>cferdinandi</span></a></span>:</p><p><a href="https://gomakethings.com/bulletproof-web-component-loading/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">gomakethings.com/bulletproof-w</span><span class="invisible">eb-component-loading/</span></a></p><p><a href="https://mas.to/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a> <a href="https://mas.to/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a></p>
Burton Smith<p>The JSX type generator now generates types for the <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> custom properties for your <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a>!</p><p><a href="https://wc-toolkit.com/integrations/jsx/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">wc-toolkit.com/integrations/js</span><span class="invisible">x/</span></a></p>
CSS Basics<p>Bulletproof 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">#<span>WebComponents</span></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"><span class="invisible">https://</span><span class="ellipsis">gomakethings.com/bulletproof-w</span><span class="invisible">eb-component-loading/</span></a></p>
Peter Kröner<p>"Croissant! Building a No-Framework Web App" by <span class="h-card" translate="no"><a href="https://social.lol/@db" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>db</span></a></span></p><p>👉 <a href="https://dbushell.com/2025/07/11/croissant-no-framework-web-app/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">dbushell.com/2025/07/11/croiss</span><span class="invisible">ant-no-framework-web-app/</span></a></p><p>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.</p><p><a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webcomponents</span></a></p>
Burton Smith<p>I put together a simple PR to try to improve the <span class="h-card" translate="no"><a href="https://programming.dev/c/angular" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>angular</span></a></span> / <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> validation. This would let you be more specific about which components get excluded from validation instead of everything.</p><p>I'm working on the custom element validation piece of it later.</p><p><a href="https://github.com/angular/angular/pull/62638" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/angular/angular/pul</span><span class="invisible">l/62638</span></a></p>
Ben Delarre<p>I 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">#<span>webcomponents</span></a> (preferably lit) experience!</p><p>Small team, building a new product as part of an incubation organization. Lots to do, and lots of interesting things to build!</p><p><a href="https://careers.adobe.com/us/en/job/ADOBUSR157111EXTERNALENUS/Sr--Front-End-Engineer" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">careers.adobe.com/us/en/job/AD</span><span class="invisible">OBUSR157111EXTERNALENUS/Sr--Front-End-Engineer</span></a></p><p><a href="https://mastodon.social/tags/getfedihired" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>getfedihired</span></a> <a href="https://mastodon.social/tags/lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>lit</span></a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a></p>
Austin Andrews<p>Cleaning up some of the components for an upcoming project.</p><p>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.</p><p><a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Reviews" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Reviews</span></a><br>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"><span class="invisible">https://</span><span class="">ilo.im/165bqw</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/WebAwesome" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebAwesome</span></a> <a href="https://mastodon.social/tags/Shoelace" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Shoelace</span></a> <a href="https://mastodon.social/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenSource</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/Framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Framework</span></a> <a href="https://mastodon.social/tags/UiComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UiComponents</span></a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/WebAPIs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebAPIs</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a></p>