30 replies

1. Private reply Bluesky 23 min later
   1. Zach Leatherman Bluesky 31 min later

      I’m curious what the costs are. My hunch would be that Shadow DOM has overhead costs but are those costs better than dumping everything into light dom when you hit 100 instances? 1000? I suppose i can test this myself just curious if folks have done it already

      1. Private reply Bluesky 43 min later
         1. Private reply Bluesky 46 min later
         2. Justin Fagnani Bluesky 47 min later

            This is about right. ShadowRoots and slots are Nodes and have some unavoidable costs. But then some style calcs are cheaper, and quite often you can make simpler DOM and styles when you don't have to be defensive.

2. Thomas Broyer Bluesky 33 min later

   Nolan Lawson made some measuring a few years ago about style performance:
   nolanlawson.com/2021/08/15/d...
   nolanlawson.com/2023/12/30/s...
   And even made a talk about it:
   nolanlawson.github.io/css-talk-2022/

   1. Bramus Bluesky 52 min later

      Seems like a good thing to add to chrome.dev/css-selector....

      I'll try and take a stab at it later tonight.

      1. Bramus Bluesky 5 hr later

         Here you go: chrome.dev/css-selector...

3. Nathan Knowler Mastodon 40 min later

   @zachleat cc: @bendelarre @westbrook have either of you done testing about this?

   1. Ben Delarre Mastodon 52 min later

      @knowler @zachleat @westbrook I haven't. But I'd be interested to hear about the results of such testing.

      My high level understanding is that shadowdom should outperform lightdom in cases where style and layout computation can be delineated. But having real numbers on this would be really great.

   2. westbrook Mastodon 3 hr later

      @knowler @zachleat @bendelarre

      I've found that DOM generally has a cost and that a lot of devs end up putting an extra node inside of each custom element node, for funzies, which adds up in a complex application... something, something control vs trust. 😱

      One for one, there is a small setup cost to having a shadow DOM hosting node over a DOM node without a shadow DOM. But, once you've paid it, there are similar runtime benefits to making changes to the DOM/CSS in that encapsulated context. ⚖️

4. Taylor “Tigt” Hunt Mastodon 3 hr later

   @zachleat IIRC this can easily become engine-specific, but the general/ambient costs between shad/light can be easily dwarfed by communication between them

   Optimist take: initialize once and respond responsibly and you're gold

   Pessimist take: light DOM everywhere since you can't trust others not to junk up the communication boundaries

   Cynicist take: "we need to bootload Adobe analytics separately inside each of the Shadow roots by EOW"

   1. Zach Leatherman Mastodon 4 hr later

      @tigt ANALYTICS, YOU SAY

      1. Taylor “Tigt” Hunt Mastodon 4 hr later

         @zachleat Oh no are you having my old problem

5. Bramus Mastodon 5 hr later

   @zachleat Here you go: https://chrome.dev/css-selector-benchmark/?category=Shadow+DOM

6. Zach Leatherman Bluesky 21 hr later

   @bram.us added some benchmarks: chrome.dev/css-selector...

   Seems like Light > Shadow > Light/Shadow 50/50 mix

   1. William Allyn Nova (he/they) Bluesky 1 day later

      With the recalcs I’m also curious if css containment has any positive impact. That was a thing I wanted to see stencil have back in the day since adding the style tag would trigger expensive recalcs but using the constructae/adoptedStylesheets significantly improved recalc/restyles.

      1. William Allyn Nova (he/they) Bluesky 1 day later

         Constructible* lol

      2. Zach Leatherman Bluesky 4 days later

         that would be interesting to test!

7. Zach Leatherman Mastodon 21 hr later

   @bramus added some benchmarks: https://chrome.dev/css-selector-benchmark/?category=Shadow+DOM

   Reads to me as Light > Shadow > Light/Shadow 50/50 mix

8. Private reply Bluesky 4 days later
   1. Zach Leatherman Bluesky 4 days later

      sure, but are you saying that isolation has perf benefits or downsides?

      1. Private reply Bluesky 4 days later
         1. Zach Leatherman Bluesky 4 days later

            that makes sense, thanks! appreciate your insight!

            1. Private reply Bluesky 4 days later
            2. Private reply Bluesky 4 days later
            3. Private reply Bluesky 4 days later
               1. Private reply Bluesky 4 days later
                  1. Zach Leatherman Bluesky 4 days later

                     I sent my thank you too early! you had more to share! (still appreciated!)

            4. Private reply Bluesky 4 days later