Cherry pick create style element fix (#25387)

* Add some logic to stylesheet that will do a simple append instead of using insert before if the reference node isn't actually a child of the document head.

* Change files

change/@uifabric-merge-styles-7568f8f0-b308-4ee8-922e-a0afc4c3f931.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add some logic to stylesheet that will do a simple append instead of using insert before if the reference node isn't actually a child of the document head.",
+  "packageName": "@uifabric/merge-styles",
+  "email": "gcox@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/merge-styles/src/Stylesheet.ts

@@ -303,6 +303,7 @@ export class Stylesheet {
   private _createStyleElement(): HTMLStyleElement {
     const head: HTMLHeadElement = document.head;
     const styleElement = document.createElement('style');
+    let nodeToInsertBefore: Node | null = null;
 
     styleElement.setAttribute('data-merge-styles', 'true');
 
@@ -315,16 +316,18 @@ export class Stylesheet {
     if (this._lastStyleElement) {
       // If the `nextElementSibling` is null, then the insertBefore will act as a regular append.
       // https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore#Syntax
-      head!.insertBefore(styleElement, this._lastStyleElement.nextElementSibling);
+      nodeToInsertBefore = this._lastStyleElement.nextElementSibling;
     } else {
       const placeholderStyleTag: Element | null = this._findPlaceholderStyleTag();
 
       if (placeholderStyleTag) {
-        head!.insertBefore(styleElement, placeholderStyleTag.nextElementSibling);
+        nodeToInsertBefore = placeholderStyleTag.nextElementSibling;
       } else {
-        head!.insertBefore(styleElement, head.childNodes[0]);
+        nodeToInsertBefore = head.childNodes[0];
       }
     }
+
+    head!.insertBefore(styleElement, head!.contains(nodeToInsertBefore) ? nodeToInsertBefore : null);
     this._lastStyleElement = styleElement;
 
     return styleElement;