On some devices, the styles didn't have any effect after inserting th…

…em into DOM with the `addCssText` function. The investigation revealed that appending the text note after the corresponding style element was inserted didn't trigger the styles recalculation.

RELNOTES: Fix for the issue when styles were not getting evaluated after insertion in DOM

PiperOrigin-RevId: 473858460
Change-Id: Ic9294bd50ab3a25e8e98fc9f343e5fabeecc3d70

closure/goog/cssom/BUILD

@@ -13,5 +13,6 @@ closure_js_library(
         "//closure/goog/dom",
         "//closure/goog/dom:safe",
         "//closure/goog/dom:tagname",
+        "//closure/goog/labs/useragent:browser",
     ],
 )

closure/goog/cssom/cssom.js

@@ -23,6 +23,7 @@ goog.require('goog.array');
 goog.require('goog.dom');
 goog.require('goog.dom.TagName');
 goog.require('goog.dom.safe');
+goog.require('goog.labs.userAgent.browser');
 
 
 /**
@@ -381,15 +382,29 @@ goog.cssom.addCssText = function(cssText, opt_domHelper) {
 
   cssNode.type = 'text/css';
   var head = domHelper.getElementsByTagName(goog.dom.TagName.HEAD)[0];
-  head.appendChild(cssNode);
+
+  // IE requires the element to be inserted in the document before any
+  // style contents is added to the element. Other browsers don't
+  // process style content changes made after the element is attached
+  // to the DOM, as a performance optimization.
+  const isIE = goog.labs.userAgent.browser.isIE();
+  if (isIE) {
+    head.appendChild(cssNode);
+  }
+
   if (cssNode.styleSheet) {
-    // IE.
+    // IE pre-9
     cssNode.styleSheet.cssText = cssText;
   } else {
-    // W3C.
+    // W3C including IE9+
     var cssTextNode = document.createTextNode(cssText);
     cssNode.appendChild(cssTextNode);
   }
+
+  if (!isIE) {
+    head.appendChild(cssNode);
+  }
+
   return cssNode;
 };