TechHub

Frontend DogmaPublic CSS Custom Properties in the Shadow DOM, by @michaelwarren.dev:<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><a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mas.to/tags/customproperties" class="mention hashtag" rel="nofollow noopener" target="_blank">#customproperties</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/animations" class="mention hashtag" rel="nofollow noopener" target="_blank">#animations</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>

Brandon Zhang 🇨🇳<a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> people, in this Codepen that I set up for testing, the dialog inside the <a href="https://mastodon.online/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> cannot be open by its sibling button even enough they're connected by correct ID attribute. Is this expected or am I missing something here?<a href="https://codepen.io/brandonzhang/pen/QwwXXmL" rel="nofollow noopener" translate="no" target="_blank">https://codepen.io/brandonzhang/pen/QwwXXmL</a>

Danny Blueshadow parts are pretty good actually.<a href="https://indieweb.social/tags/shadowdom" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowdom</a> <a href="https://indieweb.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a>

Peter KrönerHow do I figure out the total number of DOM nodes in a page, _including_ <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a>, open and closed?<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>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Pitfalls" class="mention hashtag" rel="nofollow noopener" target="_blank">#Pitfalls</a> All browsers get this wrong · What DevTools misinterpret about Shadow DOM <a href="https://ilo.im/163dax" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/163dax</a>_____ <a href="https://mastodon.social/tags/Bugs" class="mention hashtag" rel="nofollow noopener" target="_blank">#Bugs</a> <a href="https://mastodon.social/tags/Specification" class="mention hashtag" rel="nofollow noopener" target="_blank">#Specification</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/DevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#DevTools</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#Browser</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/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>

JWSGeekI'm in total agreement with this post: <a href="https://gomakethings.com/the-shadow-dom-is-an-antipattern/" rel="nofollow noopener" translate="no" target="_blank">https://gomakethings.com/the-shadow-dom-is-an-antipattern/</a> - the ability to have a global CSS system is something that has been encouraged for YEARS as a matter of reducing the download footprint, yet shadow dom discourages this.And there shouldn't be any technical reason why slots should require shadow. take this declared child, move it to that spot in my html structure. It can be (and has been) faked by multiple frameworks including lit, stencil, and JET.'generic' web components that use internal CSS to define the layout, and then rely on a global css system to be flexible in appearance, is what we web-devs really want.<a href="https://universeodon.com/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://universeodon.com/tags/webcomponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webcomponents</a> <a href="https://universeodon.com/tags/shadowdom" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowdom</a>

saiotTIL: The @font-face rule does not work in the shadow DOM<a href="https://fbedussi.github.io/blog/til/The-font-face-rule-does-not-work-in-the-shadow-DOM" rel="nofollow noopener" translate="no" target="_blank">https://fbedussi.github.io/blog/til/The-font-face-rule-does-not-work-in-the-shadow-DOM</a><a href="https://mastodon.uno/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.uno/tags/shadowdom" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowdom</a>

Aral BalkanNew Kitten release• Now leaves <style> tags within <template> tags alone when collating and normalising the CSS on a page so as not to interfere with scoped styles in declarative shadow DOM.(Kitten’s Streaming HTML workflow¹ – which uses htmx and WebSockets under the hood – combined with built-in support for slots, etc., in Kitten components² means the use of declarative shadow DOM is mostly useful if you want scoped styles. Ideally, of course, use classes to scope styles to your components and be specific in your CSS selectors in general so as not to pollute elements in your components. Although that’s a bit like saying you should floss everyday. Yeah, we all know we should…) :)Update: All that said, I’d highly recommend you don’t use Shadow DOM in your Kitten apps. For one thing, htmx’s WebSocket extension doesn’t seem to play well with it. And for another, you really don’t need it and definitely not just to get scoped CSS.Enjoy!:kitten:💕¹ <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/</a> ² <a href="https://kitten.small-web.org/tutorials/components-and-fragments/" rel="nofollow noopener" translate="no" target="_blank">https://kitten.small-web.org/tutorials/components-and-fragments/</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/CSSScoping" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSScoping</a> <a href="https://mastodon.ar.al/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> <a href="https://mastodon.ar.al/tags/shadowRoot" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowRoot</a> <a href="https://mastodon.ar.al/tags/DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#DOM</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#JS</a> <a href="https://mastodon.ar.al/tags/style" class="mention hashtag" rel="nofollow noopener" target="_blank">#style</a> <a href="https://mastodon.ar.al/tags/template" class="mention hashtag" rel="nofollow noopener" target="_blank">#template</a> <a href="https://mastodon.ar.al/tags/declarativeShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#declarativeShadowDOM</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a>

westbrookIn that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:<a href="https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/" rel="nofollow noopener" translate="no" target="_blank">https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/</a>Catch up on some techniques for managing connection time work in a custom element. 😁 There's even reasons for using shadow DOM hidden in there. 😱Thanks @nachtfunke for starting the convo on this and <a href="https://mastodon.social/@zachleat" class="u-url mention" rel="nofollow noopener" target="_blank">@zachleat</a> for challenging a toot into a full on blog dump. 🙇 <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElements</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/moveBefore" class="mention hashtag" rel="nofollow noopener" target="_blank">#moveBefore</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a>

westbrook<a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener" target="_blank">@zachleat</a> <a href="https://indieweb.social/@nachtfunke" class="u-url mention" rel="nofollow noopener" target="_blank">@nachtfunke</a> I'm not saying this is because I didn't get you anything for your birthday, but I'm also not saying it isn't because of that...<a href="https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/" rel="nofollow noopener" translate="no" target="_blank">https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/</a><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> <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a>

Burton SmithThis is a re-post since I don't see Keith on here:Call to action for <a href="https://mastodon.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> / <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> fans: I've added an experimental flag to Firefox lifting the restriction on adoptedStyleSheets, meaning shadowroots can adopt `link.sheet` or `style.sheet`.Please try this out, and let me know if you encounter issues! <a href="https://github.com/w3c/csswg-drafts/issues/10013" rel="nofollow noopener" translate="no" target="_blank">https://github.com/w3c/csswg-drafts/issues/10013</a>

keithamus<a href="https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2627222385" rel="nofollow noopener" translate="no" target="_blank">https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2627222385</a>Call to action for <a href="https://indieweb.social/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponent</a> / <a href="https://indieweb.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> fans: I've added an experimental flag to Firefox lifting the restriction on adoptedStyleSheets, meaning shadowroots can adopt `link.sheet` or `style.sheet`.Please try this out, and let me know if you encounter issues!

pablolarah🔵 Declarative Shadow DOM By Schalk Neethling <a href="https://hachyderm.io/@schalkneethling" class="u-url mention" rel="nofollow noopener" target="_blank">@schalkneethling</a> Declarative shadow DOM enables seamless server-side rendering for the web platform. at Stephanie Eckles <a href="https://front-end.social/@5t3ph" class="u-url mention" rel="nofollow noopener" target="_blank">@5t3ph</a> 12 Days of Web <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://12daysofweb.dev/2024/declarative-shadow-dom/" rel="nofollow noopener" translate="no" target="_blank">https://12daysofweb.dev/2024/declarative-shadow-dom/</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/Explorations" class="mention hashtag" rel="nofollow noopener" target="_blank">#Explorations</a> Isomorphic web components · Who says web components can’t be rendered server-side? <a href="https://ilo.im/161cdx" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/161cdx</a>_____ <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/WebPlatform" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebPlatform</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/LightDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#LightDOM</a> <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</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> <a href="https://mastodon.social/tags/Backend" class="mention hashtag" rel="nofollow noopener" target="_blank">#Backend</a> <a href="https://mastodon.social/tags/Server" class="mention hashtag" rel="nofollow noopener" target="_blank">#Server</a>

CuriousCoderWhat is the Shadow DOM?The <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a> is a web standard that enables encapsulation of <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> and <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>, allowing developers to create components with isolated styling and structure.Those so called web components are like custom HTML-Elements, but with all the utilities and properties of built-in HTML-Elements. You can roughly think of it like React Components, but with plain VanillaJS.<a href="https://developer.chrome.com/docs/css-ui/declarative-shadow-dom" rel="nofollow noopener" translate="no" target="_blank">https://developer.chrome.com/docs/css-ui/declarative-shadow-dom</a><a href="https://mastodon.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdevelopment</a> <a href="https://mastodon.social/tags/webstandard" class="mention hashtag" rel="nofollow noopener" target="_blank">#webstandard</a>

pablolarah🏫 The Shadow DOM is in the frontby Sufian Rhazi <a href="https://apub.abstract.properties/users/sufian" class="u-url mention" rel="nofollow noopener" target="_blank">@sufian</a> <a href="https://mastodon.social/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://abstract.properties/the-shadow-dom-is-in-the-front.html" rel="nofollow noopener" translate="no" target="_blank">https://abstract.properties/the-shadow-dom-is-in-the-front.html</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/Techniques" class="mention hashtag" rel="nofollow noopener" target="_blank">#Techniques</a> Combining light DOM and shadow DOM · How to mix-and-match both in a web component <a href="https://ilo.im/160yn2" rel="nofollow noopener" translate="no" target="_blank">https://ilo.im/160yn2</a>_____ <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/LightDom" class="mention hashtag" rel="nofollow noopener" target="_blank">#LightDom</a> <a href="https://mastodon.social/tags/ShadowDom" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDom</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> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>

westbrook<a href="https://botsin.space/@intenttoship" class="u-url mention" rel="nofollow noopener" target="_blank">@intenttoship</a> :ThisTBH: 👏 👏 👏 👏 👏 <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/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a> <a href="https://mastodon.social/tags/testTheWebForward" class="mention hashtag" rel="nofollow noopener" target="_blank">#testTheWebForward</a>

Recent searches

Search options

Administered by:

Server stats:

#shadowdom