Veganism Social

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>

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>

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>

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>

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>

That HTML Blog & The Spicy WebMove over Bootstrap.Web Awesome is an awesome successor to what in my opinion was already the best open source <a href="https://intuitivefuture.com/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> library (Shoelace) on the market. Now we have the best <a href="https://intuitivefuture.com/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> framework on the market.All of the CSS is…um…just CSS and all of the components are…um…just web components. Native <a href="https://intuitivefuture.com/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> APIs across the board. 🙌Take a first look at the brand new public beta:<a href="https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/" rel="nofollow noopener" translate="no" target="_blank">https://thathtml.blog/2025/07/web-awesome-is-the-first-native-component-framework/</a>

FullStack BulletinBulletproof web component loading<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.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a>

westbrook<a href="https://front-end.social/@leaverou" class="u-url mention" rel="nofollow noopener" target="_blank">@leaverou</a> These all power HTML in some way or other...- Scoped Custom Element Registries - Reference Target API - elementInternals.type <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md" rel="nofollow noopener" translate="no" target="_blank">https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ElementInternalsType/explainer.md</a> - Declarative CSS Modules and the adoptedstylesheets attribute <a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md" rel="nofollow noopener" translate="no" target="_blank">https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md</a> - Declarative Partial Updates <a href="https://github.com/WICG/declarative-partial-updates" rel="nofollow noopener" translate="no" target="_blank">https://github.com/WICG/declarative-partial-updates</a> - 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!<a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponentsCG</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a>

Burton SmithHere's a fun little CEM utility I threw together this weekend. It sorts CEM properties alphabetically and can also sort out deprecated properties.This is helpful for documentation and producing a consistent CEM.<a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://wc-toolkit.com/cem-utilities/cem-sorter/" rel="nofollow noopener" translate="no" target="_blank">https://wc-toolkit.com/cem-utilities/cem-sorter/</a>

Recent searches

Search options

Administered by:

Server stats:

#webcomponents