CSSStyleSheet class disappears when parsing an SVG string - css

Question

Example: JSFiddle
I have an svg image with a style element
<svg ...>
<style>
...
</style>
...
</svg>
If I embed the svg onto an empty HTML document, these two blocks of code result in a difference that I didn't expect.
block #1
let svg = document.querySelector("svg")
block #2
let s = new XMLSerializer();
let p = new DOMParser();
let svg = p.parseFromString(s.serializeToString(document.querySelector("svg")), "image/svg+xml").documentElement;
These two blocks produce a difference in regards to the <style> child (.children[0] here). The CSSStyleSheet is normally found on the "sheet" property on the <style> child:
svg.children[0].sheet
in block #1, the "sheet" property is available.
in block #2, it's null.
why is this? Am I doing something wrong in block #2? The <style> child exists in both cases, it just isn't recognized as a CSSStyleSheet in block #2.
The purpose of all of this is that I am building an SVG parser, so I need to be able to load files as strings and parse them.
workaround?: I can get the innerHTML of the <style> element in both cases, but CSSStyleSheet doesn't have a simple constructor where I can pass in the entire string; that would be nice, I could construct a new CSSStyleSheet. I can create a CSSStyleSheet and add rules individually, but I think I need to parse CSS, which sounds difficult.
I just want the benefit of the CSSRuleList. being able to iterate over that is super helpful.

Answer 1

I found the solution. it's not well documented
A <style> element must be a child of the HTMLDocument (not XMLDocument, nor parent-less) for the "sheet" property to exist and be of type CSSStyleSheet.
this was previously uncovered in this question.
solution (summary)
append the <style> element to the window.document.body, then access "sheet" property.
solution (detail)
get the root parent node of the <style> element (loop .parentNode until at root).
check the type of root with root.constructor === window.HTMLDocument.
(you can't test against null because XMLDocument will not generate a "sheet" property)
if #2 is true, "sheet" property will exist. if false, continue:
append the <style> to document.body. (or the <svg> if it contains the style. both work)
the sheet property now exists. do whatever you need with it.
remove <style> from document.body.