Make strip-whitespace templates without dom-module

PolymerElements · Jul 2, 2018 · b8f61ff · b8f61ff
1 parent e3bced8
commit b8f61ff
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 47 deletions.
diff --git a/paper-spinner-lite.js b/paper-spinner-lite.js
@@ -13,28 +13,22 @@ import '@polymer/paper-styles/color.js';
 import './paper-spinner-styles.js';
 
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
 import {PaperSpinnerBehavior} from './paper-spinner-behavior.js';
 
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
+const template = html`
+  <style include="paper-spinner-styles"></style>
 
-$_documentContainer.innerHTML = `<dom-module id="paper-spinner-lite">
-  <template strip-whitespace="">
-    <style include="paper-spinner-styles"></style>
-
-    <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
-      <div class="spinner-layer">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
-      </div>
+  <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
+    <div class="spinner-layer">
+      <div class="circle-clipper left"></div>
+      <div class="circle-clipper right"></div>
     </div>
-  </template>
-
-  
-</dom-module>`;
+  </div>
+`;
+template.setAttribute('strip-whitespace', '');
 
-document.head.appendChild($_documentContainer.content);
 /**
 Material design: [Progress &
 activity](https://www.google.com/design/spec/components/progress-activity.html)
@@ -69,6 +63,8 @@ Custom property | Description | Default
 @demo demo/index.html
 */
 Polymer({
+  _template: template,
+
   is: 'paper-spinner-lite',
 
   behaviors: [PaperSpinnerBehavior]

diff --git a/paper-spinner.js b/paper-spinner.js
@@ -13,43 +13,36 @@ import '@polymer/paper-styles/color.js';
 import './paper-spinner-styles.js';
 
 import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
 import {PaperSpinnerBehavior} from './paper-spinner-behavior.js';
 
-const $_documentContainer = document.createElement('template');
-$_documentContainer.setAttribute('style', 'display: none;');
-
-$_documentContainer.innerHTML = `<dom-module id="paper-spinner">
-  <template strip-whitespace="">
-    <style include="paper-spinner-styles"></style>
-
-    <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
-      <div class="spinner-layer layer-1">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
-      </div>
-
-      <div class="spinner-layer layer-2">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
-      </div>
-
-      <div class="spinner-layer layer-3">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
-      </div>
-
-      <div class="spinner-layer layer-4">
-        <div class="circle-clipper left"></div>
-        <div class="circle-clipper right"></div>
-      </div>
+const template = html`
+  <style include="paper-spinner-styles"></style>
+
+  <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
+    <div class="spinner-layer layer-1">
+      <div class="circle-clipper left"></div>
+      <div class="circle-clipper right"></div>
+    </div>
+
+    <div class="spinner-layer layer-2">
+      <div class="circle-clipper left"></div>
+      <div class="circle-clipper right"></div>
     </div>
-  </template>
 
-  
-</dom-module>`;
+    <div class="spinner-layer layer-3">
+      <div class="circle-clipper left"></div>
+      <div class="circle-clipper right"></div>
+    </div>
 
-document.head.appendChild($_documentContainer.content);
+    <div class="spinner-layer layer-4">
+      <div class="circle-clipper left"></div>
+      <div class="circle-clipper right"></div>
+    </div>
+  </div>
+`;
+template.setAttribute('strip-whitespace', '');
 
 /**
 Material design: [Progress &
@@ -94,6 +87,8 @@ Custom property | Description | Default
 @demo demo/index.html
 */
 Polymer({
+  _template: template,
+
   is: 'paper-spinner',
 
   behaviors: [PaperSpinnerBehavior]