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!

💕

¹ https://kitten.small-web.org/tutorials/streaming-html/
² https://kitten.small-web.org/tutorials/components-and-fragments/

#Kitten #SmallWeb #SmallTech #CSS #CSSScoping #ShadowDOM #shadowRoot #DOM #HTML #JavaScript #JS #style #template #declarativeShadowDOM #NodeJS #web #dev

Is it possible to access a closed #ShadowRoot on a non-custom element?

```
<div>
<template shadowrootmode="closed">
...
</template>
</div>
```

The only ways I'm aware of are `HTMLElement.prototype.attachInternals` which requires a custom element or to manually attach the root with `Element.prototype.attachShadow` and save the result. Are those the only two ways to get at a closed root?

I 💜 #webComponents but I'm not a fan of the #shadowRoot bc I usually _want_ styles to be inherited. I've read that you can include the same stylesheet again inside the SR but that's got to add a lot of processing. I read lots of other hackish solutions too.

Anyway, I've had some success just using the light side - regular #dom nodes. I built a wrapper around <progress> to do nice animations & reporting current task, too. And another to make #privacy friendly social media share btns.
#webDev

Oh, you say you're interested in expanded APIs around controlling the way styles flow into your #shadowRoot? Well, have I got some meeting notes for you!

https://github.com/w3c/webcomponents-cg/issues/78#issuecomment-1969671868

Checkout the discussion by the #webComponentsCG about styling #webComponents in new and more fluent ways. We're gathering use cases to share with browser implementors, so if you've got one, join the conversation in Discord https://discord.gg/ZT7QDsG2kT or in a future breakout to support getting it addressed. 🧑🏼‍🎤

Web Programmer be like :

> 8 SHADOW ROOT MISTAKES & HOW TO FIX THEM

ah yes

https://behindthechair.com/articles/8-shadow-root-mistakes-how-to-fix-them/

#rickrolling #webdevelopment #es6 #javascript #js #shadowdom #shadowroot #lol