toad.social

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>

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>

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!

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸I think <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> vars are good enough for bridging styles from a page into it's <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/unpopularOpinion" class="mention hashtag" rel="nofollow noopener" target="_blank">#unpopularOpinion</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/styling" class="mention hashtag" rel="nofollow noopener" target="_blank">#styling</a>

westbrookI’ve never had stress around putting all my <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> for all of my <a href="https://mastodon.social/tags/webComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponent</a> in their <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a>… ask me anything.

westbrook<a href="https://sunny.garden/@knowler" class="u-url mention" rel="nofollow noopener" target="_blank">@knowler</a> MDN accepts PRs…I started working on <a href="https://github.com/Westbrook/axe-core-element-internals" rel="nofollow noopener" translate="no" target="_blank">https://github.com/Westbrook/axe-core-element-internals</a> as a test bed for <a href="https://mastodon.social/tags/ElementInternals" class="mention hashtag" rel="nofollow noopener" target="_blank">#ElementInternals</a> usage for ace-core, but maybe more useful at large for these APIs. I accept PRs, too. 🤗Also, we’re looking to reignite the push for community docs and guides for WCs in <a href="https://discord.gg/KzgaSbGc9q" rel="nofollow noopener" translate="no" target="_blank">https://discord.gg/KzgaSbGc9q</a> to clarify these sorts of things, as well. <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/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponentsCG</a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a>

westbrook<a href="https://social.vivaldi.net/@brucelawson" class="u-url mention" rel="nofollow noopener" target="_blank">@brucelawson</a> and, it’s behind the Experimental Web Platform Features flag in Chromium, so you can try it out today!!<a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a>

westbrookHi <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> friends, new and old! 👋So many of you in recent days, was there some kind of drama? 😉Thing won't always be this exciting, but I hope together we make make the web a little better place. 🚧 At times that might mean participating in the <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponentsCG</a>. Come hang out: <a href="https://github.com/w3c/webcomponents-cg" rel="nofollow noopener" translate="no" target="_blank">https://github.com/w3c/webcomponents-cg</a> 👷Others will just be sharing ideas about <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/w3c" class="mention hashtag" rel="nofollow noopener" target="_blank">#w3c</a>, etc. 📖What about you? What are you working on/learning about? Let people know in the thread! 🗣️

westbrook<a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener" target="_blank">@zachleat</a> Some others:<a href="https://indieweb.social/@trusktr" class="u-url mention" rel="nofollow noopener" target="_blank">@trusktr</a> <a href="https://mastodon.social/@stuffbreaker" class="u-url mention" rel="nofollow noopener" target="_blank">@stuffbreaker</a> <a href="https://indieweb.social/@jaredwhite" class="u-url mention" rel="nofollow noopener" target="_blank">@jaredwhite</a> <a href="https://mastodon.social/@graynorton" class="u-url mention" rel="nofollow noopener" target="_blank">@graynorton</a> <a href="https://techhub.social/@nikkimk" class="u-url mention" rel="nofollow noopener" target="_blank">@nikkimk</a> And of course the whole hash tags of:<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/customElements" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElements</a>

westbrookHrm. <a href="https://mastodon.social/tags/viewTransitions" class="mention hashtag" rel="nofollow noopener" target="_blank">#viewTransitions</a> and <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a> …discuss. <a href="https://mastodon.social/tags/CSSWG" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSWG</a> <a href="https://mastodon.social/tags/webComponentsCG" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponentsCG</a>

Jesse JurmanSmall declarative web-component for loading fonts in Shadow DOM, especially useful for components that want to load an icon using a font library!<a href="https://github.com/JRJurman/use-font" rel="nofollow noopener" translate="no" target="_blank">https://github.com/JRJurman/use-font</a>Admittedly, it is so tiny, that you could just copy-paste the code for most projects, but it is a good reference point for anyone looking for something similar!<a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a>

westbrookOooohohoo! The nearness of Reference Target <a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md" rel="nofollow noopener" translate="no" target="_blank">https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md</a> becoming a practical part of the web platform and opening even more ways to deliver accessible content to users is very exciting!! 🚀 Working on some WPTS to help the spec move forward in advance of next month's TPAC meetings. 🧪 <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</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/w3c" class="mention hashtag" rel="nofollow noopener" target="_blank">#w3c</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸Using <a href="https://mastodon.social/tags/DeclarativeShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#DeclarativeShadowDOM</a> to render placeholder content that gets replaced later as the <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/streams" class="mention hashtag" rel="nofollow noopener" target="_blank">#streams</a> in with no <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a>!<a href="https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/" rel="nofollow noopener" translate="no" target="_blank">https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/</a>This is an interesting technique, but it has limitations in that you can't close the <a href="https://mastodon.social/tags/customElement" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElement</a> until you've loaded the content.<a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/shadowDom" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDom</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/customElements" class="mention hashtag" rel="nofollow noopener" target="_blank">#customElements</a> <a href="https://mastodon.social/tags/http" class="mention hashtag" rel="nofollow noopener" target="_blank">#http</a> <a href="https://mastodon.social/tags/streaming" class="mention hashtag" rel="nofollow noopener" target="_blank">#streaming</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a>

Nathan KnowlerAnd to highlight a similar, future feature: the proposed “Reference Target for Cross-Root ARIA” feature will allow us to map which element inside the shadow tree gets referenced when ARIA attributes target our custom element.<a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md" rel="nofollow noopener" translate="no" target="_blank">https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md</a><a href="https://sunny.garden/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://sunny.garden/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> <a href="https://sunny.garden/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://sunny.garden/tags/CustomElements" class="mention hashtag" rel="nofollow noopener" target="_blank">#CustomElements</a>

Nathan KnowlerOne very nice thing about shadow trees is that since they’re encapsulated, you don’t need to worry as much about ID collisions inside the trees. This takes one thing off your plate when building a resusable custom element.<a href="https://sunny.garden/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://sunny.garden/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> <a href="https://sunny.garden/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebComponents</a> <a href="https://sunny.garden/tags/CustomElements" class="mention hashtag" rel="nofollow noopener" target="_blank">#CustomElements</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸Good reason to avoid ShadowDOM: "it breaks html forms"Bad reason: "I like global CSS"<a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mastodon.social/tags/shadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowDOM</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.social/tags/forms" class="mention hashtag" rel="nofollow noopener" target="_blank">#forms</a> <a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#webComponents</a>

Recent searches

Search options

Administered by:

Server stats:

#shadowdom