#declarativeshadowdom — Public Fediverse posts

@jensimmons @westbrook @mozilla is it a known issue that Safari & Firefox Reader Mode ignore content rendered by Web Components in the Shadow DOM - even SSR‘ed content using DSD (iOS & Mac)

#WebComponents #DeclarativeShadowDOM #DSD #SSR

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

Using #DeclarativeShadowDOM to render placeholder content that gets replaced later as the #HTML #streams in with no #JavaScript!

https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/

This is an interesting technique, but it has limitations in that you can't close the #customElement until you've loaded the content.

#webDev #shadowDom #webComponents #customElements #http #streaming #web #frontend

Released v3 of Tram-Deco, the declarative custom element library that uses #DeclarativeShadowDOM (which became available in all major browsers this week)!

https://github.com/Tram-One/tram-deco

I also added an import method, which allows you to import definitions from other HTML files (relies on `Document.parseHTMLUnsafe`, so millage may vary).

Planning to present this to Web Components Community Group, so I would love any feedback! ❤️

#WebComponents #WebDev #HTML #HTMLFirst #ShadowDOM

Put together a super lightweight and standard-API-focused implementation of Declarative Custom Elements. 👏

https://github.com/Tram-One/tram-deco

Exclusively implements all the standard Web Component APIs in an HTML-First approach that should be familiar and easy to pick up 😁 - no special syntax or template language here.

Check the repo for live codepens, and would love to hear what people think! ❤️

#WebComponents #WebDev #HTMLFirst #DeclarativeShadowDOM #ShadowDOM #HTML

Working on a way to build Declarative Custom Elements using the newly released Declarative Shadow DOM.

Turned out to only 20 lines of Javascript! I'm surprised how neatly everything kinda works.

https://codepen.io/JRJurman/pen/dyrJWep

There are some gotchas and it certainly could be more elegant, but I think it has the building blocks for building Web Components from an HTML First approach.

#WebComponents #WebDev #HTMLFirst #DeclarativeShadowDOM #ShadowDOM #HTML

Once the basic building blocks are there, it is very easy to start playing around and letting the imagination fly.
In this case I'm doing "scoped components" with declarative shadow dom, no JS involved!

#dotnet #fsharp #shadowdom #declarativeshadowdom #ssr #backend #webdev

So I got nerd-sniped by @passle and their very cool out of order #HTML streaming demo with #DeclarativeShadowDom and no client-side #JavaScript.

https://techhub.social/@passle@mastodon.social/111709021508609514

I spent yesterday playing around with this idea and came away with a `streamOutOfOrder` tagged template literal which is able to apply this optimization to any interpolations. It even composes itself correctly and can load the whole page optimally out of order, no matter how large or complex it is.

Take a look and "View Source" to see how it works!

https://dsd-out-of-order-streaming.dwac.dev/

@westbrook @matsuuu Does `lit-analyzer` apply to #JSX expressions? Currently I'm forced into #Preact until I can get `lit-html` to render hand-coded #DeclarativeShadowDom.

https://github.com/lit/lit/issues/4058

Agreed that typing `setAttribute` would be very cool. I did some theorizing in this issue, but I'm not exactly sure what it would look like. I would love to have some #TypeScript primitives (like `HTMLElementTagNameMap`) to build on top of here.

https://github.com/dgp1130/HydroActive/issues/1/

@westbrook Can I #SSR that with #DeclarativeShadowDom?

Enable #DeclarativeShadowDOM by default in #WebKit.

https://github.com/WebKit/WebKit/pull/7798/

😁