fix(engine-dom): append global stylesheets to document.head

[nolanlawson]

Details

In #2827 we started using document.adoptedStyleSheets instead of injecting <style>s into the document.head (in supported browsers). Unfortunately this breaks existing code that expects that it can crawl the CSS for all elements on the page by iterating through document.styleSheets. (As it turns out, document.adoptedStyleSheets does not affect document.styleSheets – they are separate collections.)

I opened #2922 to track removing this once it's safe to go back to using document.adoptedStyleSheets.

Does this pull request introduce a breaking change?

• ✅ No, it does not introduce a breaking change.

Does this pull request introduce an observable change?

• ⚠️ Yes, it does include an observable change.

Gus WI

W-11393601

[nolanlawson]

Surprisingly, this seems to be a slight perf improvement (in Chrome) in synthetic shadow and light DOM when rendering different styles, presumably because, even with mutable adopted stylesheets, it's faster to inject <style>s into the head than to mutate a large adoptedStyleSheets array.

Color me surprised, but in any case I'm glad there's no regression. (The first benchmark is a 1.5ms difference, so I don't really trust it.)