Lmst

#WebComponents people, in this Codepen that I set up for testing, the dialog inside the #ShadowDOM 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?

https://codepen.io/brandonzhang/pen/QwwXXmL

shadow parts are pretty good actually.

#shadowdom #webcomponents

How do I figure out the total number of DOM nodes in a page, _including_ #ShadowDOM, open and closed?

#webdev #webcomponents

#Development #Pitfalls
All browsers get this wrong · What DevTools misinterpret about Shadow DOM https://ilo.im/163dax

_____
#Bugs #Specification #WebComponents #ShadowDOM #DevTools #Browser #WebDev #Frontend #DOM #CSS

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

#javascript #webcomponents #shadowdom

TIL: The @font-face rule does not work in the shadow DOM

https://fbedussi.github.io/blog/til/The-font-face-rule-does-not-work-in-the-shadow-DOM

#javascript #shadowdom

TIL: The style inside the shadow DOM is less isolated than I thought

https://fbedussi.github.io/blog/til/The-style-inside-the-shadow-DOM-is-less-isolated-than-I-tought

#javascript #shadowdom

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

¹ 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

Screenshot of code (left) and browser output (right).

Code:

<p>I am regular root</p>
<div>
<template shadowrootmode='open'>
<p>I am shadow root</p>
<slot></slot>
<style>
p { color: red; }
</style>
</template>
</div>
<p>I am also regular root</p>
<style>
p { color: blue; }
</style>

Browser output shows “I am regular root” in blue, “I am shadow root” in red, and “I am also regular root” in blue.

Wtf is #ShadowDOM and can it please go away?

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:

https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/

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. 🙇

#customElements #webComponents #shadowDOM #moveBefore #webDev

@zachleat @nachtfunke 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...

https://blog.westbrookjohnson.com/patterns/i-am-feeling-so-disconnected/

#webComponents #webComponentsCG #webDev #customElements #shadowDOM

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!
https://github.com/w3c/csswg-drafts/issues/10013

https://github.com/w3c/csswg-drafts/issues/10013#issuecomment-2627222385

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!

🔵 Declarative Shadow DOM
By Schalk Neethling @schalkneethling
Declarative shadow DOM enables seamless server-side rendering for the web platform.
at Stephanie Eckles @5t3ph 12 Days of Web
#ShadowDOM #webdev

https://12daysofweb.dev/2024/declarative-shadow-dom/

Text on green rhomboid:
6 Dec 18
Orange text on cyan background:
Declarative Shadow DOM

#Development #Explorations
Isomorphic web components · Who says web components can’t be rendered server-side? https://ilo.im/161cdx

_____
#WebComponents #WebPlatform #WebDev #Frontend #LightDOM #ShadowDOM #HTML #JavaScript #Backend #Server

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.

https://developer.chrome.com/docs/css-ui/declarative-shadow-dom

#webdevelopment #webstandard

🏫 The Shadow DOM is in the front

by Sufian Rhazi @sufian

#ShadowDOM #webdev

https://abstract.properties/the-shadow-dom-is-in-the-front.html