Dice.camp

Michael GaleI also have a silly web components question... If I choose a helper library like <a href="https://hachyderm.io/tags/LitHtml" class="mention hashtag" rel="nofollow noopener" target="_blank">#LitHtml</a> 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? <a href="https://hachyderm.io/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://hachyderm.io/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://hachyderm.io/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://hachyderm.io/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#js</a> <a href="https://hachyderm.io/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

Frontend DogmaWeb Components: Working With Shadow DOM, by <a href="https://mastodon.social/@smashingmag" class="u-url mention" rel="nofollow noopener" target="_blank">@smashingmag</a>:<a href="https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/" rel="nofollow noopener" translate="no" target="_blank">https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/</a><a href="https://mas.to/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://mas.to/tags/shadowdom" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowdom</a> <a href="https://mas.to/tags/dom" class="mention hashtag" rel="nofollow noopener" target="_blank">#dom</a> <a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a>

Friday Front-EndPublic <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> Custom Properties in the Shadow DOM: "The definitive guide to using public CSS Custom properties to configure <a href="https://hachyderm.io/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> externally. Surely no one will ever write about this topic again." <a href="https://michaelwarren.dev/blog/css-variables-in-wc/" rel="nofollow noopener" translate="no" target="_blank">https://michaelwarren.dev/blog/css-variables-in-wc/</a>

Paris WebSimon 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.<a href="https://www.paris-web.fr/2025/conference/les-web-components-et-laccessibilite" rel="nofollow noopener" translate="no" target="_blank">https://www.paris-web.fr/2025/conference/les-web-components-et-laccessibilite</a><a href="https://mamot.fr/tags/accessibilit%C3%A9" class="mention hashtag" rel="nofollow noopener" target="_blank">#accessibilité</a> <a href="https://mamot.fr/tags/d%C3%A9veloppement" class="mention hashtag" rel="nofollow noopener" target="_blank">#développement</a> <a href="https://mamot.fr/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://mamot.fr/tags/rgaa" class="mention hashtag" rel="nofollow noopener" target="_blank">#rgaa</a>

Reuben WalkerWeb Components: Working With Shadow DOM. <a href="https://me.dm/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/" rel="nofollow noopener" translate="no" target="_blank">https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/</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>

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.

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>

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>

Nathan KnowlerIn custom elements, is it best to create one MutationObserver that handles every instance of the custom element or observers per instance, then set up and tear down the observer inside the custom element lifecycle? The target would be the custom element itself (or something within its shadow tree). <a href="https://sunny.garden/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://sunny.garden/tags/WebPerf" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebPerf</a>

KaiThe beta release of web awesome (formerly shoelace) is here and I am excited about all that cool web component stuff!<a href="https://webawesome.com/" rel="nofollow noopener" translate="no" target="_blank">https://webawesome.com/</a><a href="https://digitalcourage.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://digitalcourage.social/tags/webawesome" class="mention hashtag" rel="nofollow noopener" target="_blank">#webawesome</a>

kalvnQu'est-ce que le shadow DOM ?🔗 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM" rel="nofollow noopener" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM</a><a href="https://mastodon.xyz/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.xyz/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mastodon.xyz/tags/DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#DOM</a> <a href="https://mastodon.xyz/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

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

That HTML Blog & The Spicy WebI hate saying things which seem blindingly obvious, but when Famous People™ such as Theo on YouTube make these basic mistakes, I wonder. 🧐So here you go:`document.querySelector("# my-dumb-button").addEventListener(...)` is completely obsolete in the year 2025.Never do that again please. You don't need to!If you're wondering “well, what should I do instead?”, check the comments; we'll talk about what to do instead. Apparently it will BLOW YOUR MIND! 😂<a href="https://intuitivefuture.com/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <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>

Lorenz Kahl<a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener" target="_blank">@jensimmons</a> <a href="https://mastodon.social/@westbrook" class="u-url mention" rel="nofollow noopener" target="_blank">@westbrook</a> <a href="https://mastodon.social/@mozilla" class="u-url mention" rel="nofollow noopener" target="_blank">@mozilla</a> is it a known issue that Safari & Firefox Reader Mode ignore content rendered by Web Components in the Shadow DOM - even SSR‘ed content using DSD (iOS & Mac)<a href="https://techhub.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://techhub.social/tags/DeclarativeShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#DeclarativeShadowDOM</a> <a href="https://techhub.social/tags/DSD" class="mention hashtag" rel="nofollow noopener" target="_blank">#DSD</a> <a href="https://techhub.social/tags/SSR" class="mention hashtag" rel="nofollow noopener" target="_blank">#SSR</a>

Lars LaadeI need an event or callback before disconnectedCallback in my web component. I have to call an unmount function from a widget (react?) before the node is removed from the DOM. Any ideas? I have no control when the removal happens.<a href="https://social.vivaldi.net/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://social.vivaldi.net/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a>

KungFuDiscoMonkeyDrag and Drop and Django <a href="https://paultraylor.net/blog/2025/drag-and-drop-and-django/" rel="nofollow noopener" translate="no" target="_blank">https://paultraylor.net/blog/2025/drag-and-drop-and-django/</a><a href="https://social.tsun.co/tags/django" class="mention hashtag" rel="nofollow noopener" target="_blank">#django</a> <a href="https://social.tsun.co/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://social.tsun.co/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a>

Frontend DogmaThe Problem With Web Components, by (not on Mastodon or Bluesky):<a href="https://dev.to/besworks/the-problem-with-web-components-4f8" rel="nofollow noopener" translate="no" target="_blank">https://dev.to/besworks/the-problem-with-web-components-4f8</a><a href="https://mas.to/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

Recent searches

Search options

Administered by:

Server stats:

#WebComponents