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

#shadowdom

1 post1 participant0 posts today

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.

Introducing "ShadowRoot Injector" 🎉
github.com/Tram-One/shadowroot

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!
#WebComponents #HTML #ShadowDOM #WebDev

🪡 declaratively define shadowroots to repeat in HTML templates - Tram-One/shadowroot-injector
GitHubGitHub - Tram-One/shadowroot-injector: 🪡 declaratively define shadowroots to repeat in HTML templates🪡 declaratively define shadowroots to repeat in HTML templates - Tram-One/shadowroot-injector

I'm in total agreement with this post: gomakethings.com/the-shadow-do - 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.

Logo
gomakethings.comThe Shadow DOM is an antipatternIn my video on building a modern web app with vanilla Web Components, I mentioned that I believe the Shadow DOM is an antipattern when using Web Components. I had a few folks in the comments ask me why. After all, the Shadow DOM is touted as one of the premiere features of working with Web Component. And certain features, like slots, require the Shadow DOM to work. I’ve built a lot of Web Components over the last couple of years, and in my experience, the Shadow DOM creates more problems than it fixes.

New 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:💕

¹ kitten.small-web.org/tutorials
² kitten.small-web.org/tutorials

In that it was dropped as part of a thread that you might have otherwise been uninterested in, sharing this again to start your Thursday:

blog.westbrookjohnson.com/patt

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 @zachleat for challenging a toot into a full on blog dump. 🙇

blog.westbrookjohnson.comI'm feeling so disconnected

This is a re-post since I don't see Keith on here:

Call to action for #WebComponent / #ShadowDOM 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!
github.com/w3c/csswg-drafts/is

Currently adoptedStyleSheets has a restriction on CSSStyleSheets that have the constructed flag set: The set an indexed value algorithm for adoptedStyleSheets, given value and index, is the followi...
GitHub[cssom] Can we lift the restriction on constructed flag for adoptedStylesheets? · Issue #10013 · w3c/csswg-draftsBy keithamus

github.com/w3c/csswg-drafts/is

Call to action for #WebComponent / #ShadowDOM 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!

Currently adoptedStyleSheets has a restriction on CSSStyleSheets that have the constructed flag set: The set an indexed value algorithm for adoptedStyleSheets, given value and index, is the followi...
GitHub[cssom] Can we lift the restriction on constructed flag for adoptedStylesheets? · Issue #10013 · w3c/csswg-draftsBy keithamus

What is the Shadow DOM?

The #shadowDOM is a web standard that enables encapsulation of #HTML and #CSS,
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.

developer.chrome.com/docs/css-

web.devDeclarative Shadow DOM  |  web.devDeclarative Shadow DOM is a new way to implement and use Shadow DOM directly in HTML.