Merge pull request #483 from webcomponents/hide-template

dfreedm · dfreedm · commit 84c6c670d1fb · 2016-02-18T16:22:38.000-08:00
Hide polyfill templates from rendering
diff --git a/src/Template/Template.js b/src/Template/Template.js
@@ -33,6 +33,12 @@
     var contentDoc = document.implementation.createHTMLDocument('template');
     var canDecorate = true;
 
+    var templateStyle = document.createElement('style');
+    templateStyle.textContent = TEMPLATE_TAG + '{display:none;}';
+
+    var head = document.head;
+    head.insertBefore(templateStyle, head.firstElementChild);
+
     /**
       Provides a minimal shim for the <template> element.
     */
diff --git a/tests/Template/html/Template.html b/tests/Template/html/Template.html
diff --git a/tests/Template/tests.html b/tests/Template/tests.html
@@ -15,9 +15,20 @@
     <script src="../../../web-component-tester/browser.js"></script>
   </head>
   <body>
-    <template>
-      <span id="content">Hello World!</span>
-    </template>
+    <style>
+      .container {
+        display: flex;
+      }
+      .container > *{
+        flex: 1;
+      }
+    </style>
+
+    <div class="container">
+      <template>
+        <span id="content">Hello World!</span>
+      </template>
+    </div>
 
     <script>
       suite('Template', function() {
@@ -26,6 +37,12 @@
           template = document.querySelector('template');
         });
 
+        test('No rendering', function() {
+          var bcr = template.getBoundingClientRect();
+          assert.equal(bcr.height, 0);
+          assert.equal(bcr.width, 0);
+        });
+
         test('content', function() {
           assert.equal(template.childNodes.length, 0, 'template children evacipated');
           assert.isDefined(template.content, 'template content exists');
