From c0bbf6091b882be19268f2fb09f4656dc740d28f Mon Sep 17 00:00:00 2001
From: web-padawan <serguey.kulikov@gmail.com>
Date: Mon, 30 Apr 2018 21:39:52 +0300
Subject: [PATCH 1/2] Avoid using nested templates when setting innerHTML

---
 src/document-util.ts                    | 12 ++++----
 src/test/unit/project-converter_test.ts | 40 ++++++++++++-------------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/document-util.ts b/src/document-util.ts
index 16575f9b..5c51563f 100644
--- a/src/document-util.ts
+++ b/src/document-util.ts
@@ -540,7 +540,7 @@ export function createDomNodeInsertStatements(
           jsc.callExpression(
               jsc.memberExpression(
                   jsc.identifier('document'), jsc.identifier('createElement')),
-              [jsc.literal('div')]))]);
+              [jsc.literal('template')]))]);
   const setDocumentContainerStatement =
       jsc.expressionStatement(jsc.assignmentExpression(
           '=',
@@ -556,23 +556,25 @@ export function createDomNodeInsertStatements(
               jsc.memberExpression(
                   jsc.identifier('document'), jsc.identifier('body')),
               jsc.identifier('appendChild')),
-          [jsc.identifier(varName)]))
+          [jsc.memberExpression(
+              jsc.identifier(varName), jsc.identifier('content'))]))
     ];
   }
-  const setDisplayNoneStatment = jsc.expressionStatement(jsc.callExpression(
+  const setDisplayNoneStatement = jsc.expressionStatement(jsc.callExpression(
       jsc.memberExpression(
           jsc.identifier(varName), jsc.identifier('setAttribute')),
       [jsc.literal('style'), jsc.literal('display: none;')]));
   return [
     createElementDiv,
-    setDisplayNoneStatment,
+    setDisplayNoneStatement,
     setDocumentContainerStatement,
     jsc.expressionStatement(jsc.callExpression(
         jsc.memberExpression(
             jsc.memberExpression(
                 jsc.identifier('document'), jsc.identifier('head')),
             jsc.identifier('appendChild')),
-        [jsc.identifier(varName)]))
+        [jsc.memberExpression(
+            jsc.identifier(varName), jsc.identifier('content'))]))
   ];
 }
 
diff --git a/src/test/unit/project-converter_test.ts b/src/test/unit/project-converter_test.ts
index f3eeca01..d6b54d34 100644
--- a/src/test/unit/project-converter_test.ts
+++ b/src/test/unit/project-converter_test.ts
@@ -1694,16 +1694,16 @@ Polymer({
       assertSources(await convert(), {
         'test.js': `
 import './foo.js';
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 $_documentContainer.innerHTML = \`<custom-style><style>foo{}</style></custom-style>\`;
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 `,
         'foo.js': `
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 $_documentContainer.innerHTML = \`<div>hello world!</div>\`;
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 `
       });
     });
@@ -1930,10 +1930,10 @@ class BarElem extends Element {}
       assertSources(await convert(), {
         'test.js': `
 import { Element } from './polymer.js';
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 $_documentContainer.innerHTML = \`<div>Top</div><div>Middle</div><div>Bottom</div>\`;
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 class FooElem extends Element {}
 class BarElem extends Element {}
 `
@@ -1971,10 +1971,10 @@ class BarElem extends Element {}
       assertSources(await convert(), {
         'test.js': `
 import { Element } from './polymer.js';
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 $_documentContainer.innerHTML = \`<div>Random footer</div>\`;
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 customElements.define('foo-elem', class FooElem extends Element {
   static get template() {
     return Polymer.html\`
@@ -2549,7 +2549,7 @@ Polymer({
           }),
           {
             'test.js': `
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = \`<dom-module>
@@ -2562,7 +2562,7 @@ $_documentContainer.innerHTML = \`<dom-module>
                 `
           </dom-module>\`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 `,
           });
     });
@@ -2683,27 +2683,27 @@ console.log(foo$4);
         See: https://github.com/Polymer/polymer-modulizer/issues/154
         -->
     <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = \`<style>
             body { color: red; }
           </style>\`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 </script>
           <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = \`<style is="custom-style" include="foo-bar">
             body { font-size: 10px; }
           </style>\`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 </script>
           <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = \`<custom-style>
             <style is="custom-style">
@@ -2711,12 +2711,12 @@ $_documentContainer.innerHTML = \`<custom-style>
             </style>
           </custom-style>\`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
           <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = \`<foo-elem></foo-elem>\`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
         `
       });
@@ -2941,7 +2941,7 @@ export const bar = (function() {
       });
       assertSources(await convert(), {
         'test.js': `
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = \`<dom-module id="dom-module-attr" attr=""></dom-module><dom-module id="multiple-templates">
@@ -2949,7 +2949,7 @@ $_documentContainer.innerHTML = \`<dom-module id="dom-module-attr" attr=""></dom
             <template></template>
           </dom-module>\`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 customElements.define(
     'dom-module-attr', class extends HTMLElement{});
 customElements.define(

From 1e45391dcacaf698f1d9d36336bc5fd9df9e45cc Mon Sep 17 00:00:00 2001
From: web-padawan <serguey.kulikov@gmail.com>
Date: Mon, 30 Apr 2018 22:04:37 +0300
Subject: [PATCH 2/2] Update fixtures

---
 .../iron-icon/expected/demo/index.html        |   8 +-
 .../paper-button/expected/demo/index.html     |   8 +-
 .../paper-button/expected/paper-button.js     |   4 +-
 .../style-props/src/elements-defaults.js      |   4 +-
 .../test/smoke/style-props/src/settings.js    |   4 +-
 .../expected/test/unit/custom-style-import.js |   4 +-
 .../expected/test/unit/custom-style.html      | 112 +++++++++---------
 .../test/unit/shady-unscoped-style-import.js  |   4 +-
 .../test/unit/styling-import-shared-styles.js |   4 +-
 .../test/unit/sub/resolveurl-elements.js      |   4 +-
 .../expected/test/unit/sub/style-import.js    |   4 +-
 11 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/fixtures/packages/iron-icon/expected/demo/index.html b/fixtures/packages/iron-icon/expected/demo/index.html
index 5ffb4856..1d5ca77b 100644
--- a/fixtures/packages/iron-icon/expected/demo/index.html
+++ b/fixtures/packages/iron-icon/expected/demo/index.html
@@ -27,17 +27,17 @@
         See: https://github.com/Polymer/polymer-modulizer/issues/154
         -->
     <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
     <style is="custom-style" include="demo-pages-shared-styles"></style>
   </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<div class="vertical-section-container centered">
     <h3>
@@ -64,7 +64,7 @@ <h3><code>iron-icon</code> using an image url as its icon source.</h3>
     </demo-snippet>
   </div>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 </body>
 </html>
diff --git a/fixtures/packages/paper-button/expected/demo/index.html b/fixtures/packages/paper-button/expected/demo/index.html
index d17ea671..8f55185c 100644
--- a/fixtures/packages/paper-button/expected/demo/index.html
+++ b/fixtures/packages/paper-button/expected/demo/index.html
@@ -34,7 +34,7 @@
         See: https://github.com/Polymer/polymer-modulizer/issues/154
         -->
     <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
     <style is="custom-style" include="demo-pages-shared-styles">
@@ -48,12 +48,12 @@
     </style>
   </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 </head>
 <body unresolved>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<div class="vertical-section-container centered">
     <h3>Buttons can be flat, raised, toggleable, or disabled</h3>
@@ -154,7 +154,7 @@ <h3>Buttons can be used as a link</h3>
     </demo-snippet>
   </div>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 </body>
 </html>
diff --git a/fixtures/packages/paper-button/expected/paper-button.js b/fixtures/packages/paper-button/expected/paper-button.js
index b78e7abc..8b9efb9d 100644
--- a/fixtures/packages/paper-button/expected/paper-button.js
+++ b/fixtures/packages/paper-button/expected/paper-button.js
@@ -85,7 +85,7 @@ import '../../@polymer/iron-flex-layout/iron-flex-layout.js';
 import { PaperButtonBehavior, PaperButtonBehaviorImpl } from '../../@polymer/paper-behaviors/paper-button-behavior.js';
 import '../../@polymer/paper-styles/element-styles/paper-material-styles.js';
 import { Polymer } from '../../@polymer/polymer/lib/legacy/polymer-fn.js';
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<dom-module id="paper-button">
@@ -176,7 +176,7 @@ $_documentContainer.innerHTML = `<dom-module id="paper-button">
   
 </dom-module>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 Polymer({
   importPath: import.meta.url,
   is: 'paper-button',
diff --git a/fixtures/packages/polymer/expected/test/smoke/style-props/src/elements-defaults.js b/fixtures/packages/polymer/expected/test/smoke/style-props/src/elements-defaults.js
index c40f8c5f..4559378c 100644
--- a/fixtures/packages/polymer/expected/test/smoke/style-props/src/elements-defaults.js
+++ b/fixtures/packages/polymer/expected/test/smoke/style-props/src/elements-defaults.js
@@ -1,4 +1,4 @@
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<style is="custom-style">
@@ -12,4 +12,4 @@ $_documentContainer.innerHTML = `<style is="custom-style">
   }
 </style>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
diff --git a/fixtures/packages/polymer/expected/test/smoke/style-props/src/settings.js b/fixtures/packages/polymer/expected/test/smoke/style-props/src/settings.js
index 80dd375a..ba043670 100644
--- a/fixtures/packages/polymer/expected/test/smoke/style-props/src/settings.js
+++ b/fixtures/packages/polymer/expected/test/smoke/style-props/src/settings.js
@@ -1,6 +1,6 @@
 import { Polymer } from '../../../../lib/legacy/polymer-fn.js';
 import { html } from '../../../../lib/utils/html-tag.js';
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<dom-module id="simple-layout-styles">
@@ -30,7 +30,7 @@ $_documentContainer.innerHTML = `<dom-module id="simple-layout-styles">
   </template>
 </dom-module>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 Polymer({
   importPath: import.meta.url,
 
diff --git a/fixtures/packages/polymer/expected/test/unit/custom-style-import.js b/fixtures/packages/polymer/expected/test/unit/custom-style-import.js
index 1574c9da..365d8b98 100644
--- a/fixtures/packages/polymer/expected/test/unit/custom-style-import.js
+++ b/fixtures/packages/polymer/expected/test/unit/custom-style-import.js
@@ -1,5 +1,5 @@
 import './sub/style-import.js';
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<dom-module id="shared-style">
@@ -32,7 +32,7 @@ $_documentContainer.innerHTML = `<dom-module id="shared-style">
 </style>
 </custom-style>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 
 /**
 @license
diff --git a/fixtures/packages/polymer/expected/test/unit/custom-style.html b/fixtures/packages/polymer/expected/test/unit/custom-style.html
index e0d50ca5..cde18789 100644
--- a/fixtures/packages/polymer/expected/test/unit/custom-style.html
+++ b/fixtures/packages/polymer/expected/test/unit/custom-style.html
@@ -26,7 +26,7 @@
         See: https://github.com/Polymer/polymer-modulizer/issues/154
         -->
     <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
   <style is="custom-style">
@@ -78,10 +78,10 @@
   </style>
 </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
   <style is="custom-style">
@@ -112,11 +112,11 @@
   </style>
 </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
 <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
   <style is="custom-style" include="shared-style2">
@@ -131,10 +131,10 @@
   </style>
 </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>
   <style is="custom-style">
@@ -146,100 +146,100 @@
   </style>
 </custom-style>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="italic">italic</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="bag">bag</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="mix">mix</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="dynamic">dynamic</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="import-mixin">import-mixin</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="import-var">import-var</div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<x-bar></x-bar>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<x-foo></x-foo>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<x-red-text></x-red-text>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<x-blue-bold-text></x-blue-bold-text>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<parent-variable-with-var></parent-variable-with-var>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<br>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script><script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<br>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div id="after"></div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="foo"></div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.innerHTML = `<div class="foo--bar"></div>`;
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-baz">
     <template>
@@ -252,11 +252,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-bar">
     <template>
@@ -270,11 +270,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-foo">
     <template>
@@ -301,11 +301,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-red-text">
     <template>
@@ -318,11 +318,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="x-blue-bold-text">
     <template>
@@ -333,11 +333,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="parent-variable-with-var">
     <template>
@@ -358,11 +358,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="child-variable-with-var">
     <template>
@@ -386,11 +386,11 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="child-of-child-with-var">
     <template>
@@ -409,7 +409,7 @@
     </template>
   </dom-module>`;
 
-document.body.appendChild($_documentContainer);
+document.body.appendChild($_documentContainer.content);
 </script>
 
   <script type="module">
diff --git a/fixtures/packages/polymer/expected/test/unit/shady-unscoped-style-import.js b/fixtures/packages/polymer/expected/test/unit/shady-unscoped-style-import.js
index a9949edd..80ea6a4b 100644
--- a/fixtures/packages/polymer/expected/test/unit/shady-unscoped-style-import.js
+++ b/fixtures/packages/polymer/expected/test/unit/shady-unscoped-style-import.js
@@ -1,4 +1,4 @@
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<dom-module id="global-shared1">
@@ -25,7 +25,7 @@ $_documentContainer.innerHTML = `<dom-module id="global-shared1">
   
 </dom-module>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 
 /**
 @license
diff --git a/fixtures/packages/polymer/expected/test/unit/styling-import-shared-styles.js b/fixtures/packages/polymer/expected/test/unit/styling-import-shared-styles.js
index 21555ddc..d817e18c 100644
--- a/fixtures/packages/polymer/expected/test/unit/styling-import-shared-styles.js
+++ b/fixtures/packages/polymer/expected/test/unit/styling-import-shared-styles.js
@@ -1,4 +1,4 @@
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<dom-module id="shared-styles">
@@ -18,7 +18,7 @@ $_documentContainer.innerHTML = `<dom-module id="shared-styles">
   </template>
 </dom-module>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 
 /**
 @license
diff --git a/fixtures/packages/polymer/expected/test/unit/sub/resolveurl-elements.js b/fixtures/packages/polymer/expected/test/unit/sub/resolveurl-elements.js
index e4b7b62c..2959ff78 100644
--- a/fixtures/packages/polymer/expected/test/unit/sub/resolveurl-elements.js
+++ b/fixtures/packages/polymer/expected/test/unit/sub/resolveurl-elements.js
@@ -10,10 +10,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 import { html } from '../../../lib/utils/html-tag.js';
 
 import { PolymerElement } from '../../../polymer-element.js';
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 $_documentContainer.innerHTML = `<dom-module id="p-r-ap" assetpath="../../assets/"></dom-module>`;
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 class PR extends PolymerElement {
   static get importPath() {
     return import.meta.url;
diff --git a/fixtures/packages/polymer/expected/test/unit/sub/style-import.js b/fixtures/packages/polymer/expected/test/unit/sub/style-import.js
index 3273a2c3..bd7db08a 100644
--- a/fixtures/packages/polymer/expected/test/unit/sub/style-import.js
+++ b/fixtures/packages/polymer/expected/test/unit/sub/style-import.js
@@ -1,4 +1,4 @@
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
 
 $_documentContainer.innerHTML = `<dom-module id="style-import">
@@ -21,4 +21,4 @@ $_documentContainer.innerHTML = `<dom-module id="style-import">
   </template>
 </dom-module>`;
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);