fix(layout): use textContent for style element fallback

Author: smalluban

src/template/layout.js

@@ -185,29 +185,17 @@ export function inject(target) {
     let el = styleElements.get(root);
     if (!el) {
       el = global.document.createElement("style");
-      el.appendChild(global.document.createTextNode(""));
       root.appendChild(el);
 
       styleElements.set(root, el);
     }
 
-    const elSheet = el.sheet;
-    const cssRules = sheet.cssRules;
-
-    for (var i = 0; i < cssRules.length; i++) {
-      if (elSheet.cssRules[i]) {
-        if (elSheet.cssRules[i].cssText === cssRules[i].cssText) {
-          continue;
-        }
-        elSheet.removeRule(i);
-      }
-
-      elSheet.insertRule(cssRules[i].cssText, i);
+    let result = "";
+    for (let i = 0; i < sheet.cssRules.length; i++) {
+      result += sheet.cssRules[i].cssText;
     }
 
-    for (; i < elSheet.cssRules.length; i++) {
-      elSheet.removeRule(i);
-    }
+    el.textContent = result;
   }
 
   injectedTargets.add(root);

test/spec/layout.js

@@ -1,4 +1,5 @@
 import { html } from "../../src/template/index.js";
+import { resolveTimeout } from "../helpers.js";
 
 describe("layout:", () => {
   let host;
@@ -83,6 +84,22 @@ describe("layout:", () => {
     expect(window.getComputedStyle(host).flexDirection).toBe("column");
   });
 
+  it("keeps rules when element is taken out from the document", () => {
+    const shadowRoot = host.attachShadow({ mode: "open" });
+    html`<template layout="block"><div layout="row"></div></template>`(
+      host,
+      shadowRoot,
+    );
+    document.body.removeChild(host);
+
+    return resolveTimeout().then(() => {
+      document.body.appendChild(host);
+      expect(window.getComputedStyle(shadowRoot.children[0]).display).toBe(
+        "flex",
+      );
+    });
+  });
+
   it("supports custom selectors", () => {
     html`<template layout="row" layout.active="column"></template>`(host);