fix(adopt): adoptStyleSheets will now allow both polyfill and script …

…to be placed in head
calebdwilliams · Sep 12, 2019 · 58620e6 · 58620e6
1 parent ff32188
commit 58620e6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/adopt.js b/src/adopt.js
@@ -49,7 +49,13 @@ export function adoptStyleSheets(location) {
 
   // Since we already removed all elements during appending them to the
   // document fragment, we can just re-add them again.
-  if (location.firstChild) {
+  if (location === document && document.readyState === 'loading') {
+    // If the styles need to be appended to document
+    // before the document is ready, put them in the head
+    // TODO: Eventually move these to the document once it has parsed
+    // to ensure proper cascade order relative to the spec
+    document.head.appendChild(newStyles);
+  } else if (location.firstChild) {
     location.insertBefore(newStyles, location.firstChild);
   } else {
     location.appendChild(newStyles);

diff --git a/test/index.html b/test/index.html
@@ -4,11 +4,11 @@
         <title>Constructed style sheets test</title>
         <meta charset="UTF-8">
         <script src="../dist/adoptedStyleSheets.js"></script>
+        <script src="./test.js"></script>
     </head>
     <body>
         <h1>Hello world</h1>
 
         <p>How are you today?</p>
-        <script src="./test.js"></script>
     </body>
 </html>