Merge pull request #5319 from Polymer/set-template

Add a template setter to ElementMixin
Polymer · Aug 13, 2018 · c4a1b51 · c4a1b51
2 parents e8167f7 + 7644464
commit c4a1b51
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 1 deletion.
diff --git a/lib/mixins/element-mixin.js b/lib/mixins/element-mixin.js
@@ -375,7 +375,7 @@ export const ElementMixin = dedupingMixin(base => {
      *     }
      *   }
      *
-     * @return {HTMLTemplateElement|string} Template to be stamped
+     * @return {!HTMLTemplateElement|string} Template to be stamped
      */
     static get template() {
       if (!this.hasOwnProperty(JSCompiler_renameProperty('_template', this))) {
@@ -389,6 +389,15 @@ export const ElementMixin = dedupingMixin(base => {
       return this._template;
     }
 
+    /**
+     * Set the template.
+     *
+     * @param {!HTMLTemplateElement|string} value Template to set.
+     */
+    static set template(value) {
+      this._template = value;
+    }
+
     /**
      * Path matching the url from which the element was imported.
      *

diff --git a/test/unit/polymer.element.html b/test/unit/polymer.element.html
@@ -266,6 +266,26 @@ <h1>Sub template</h1>
 }
 
 customElements.define('sub-new-template', SubNewTemplate);
+
+/**
+ * Instead of overriding the static getter, this element has its template
+ * assigned directly to the constructor.
+ */
+class SubNewTemplateAssigned extends window.MyElement {
+  static get properties() {
+    return {
+      prop2: {
+        value: 'prop2',
+      }
+    };
+  }
+}
+
+SubNewTemplateAssigned.template = html`
+  <h1>Sub template</h1>
+  <div id="subContent">{{prop2}}</div>`;
+
+customElements.define('sub-new-template-assigned', SubNewTemplateAssigned);
 </script>
 
   <template id="no-dom-module">
@@ -579,6 +599,25 @@ <h1>Sub template</h1>
   });
 });
 
+suite('subclass new template assigned', function() {
+  let el;
+
+  setup(function() {
+    el = document.createElement('sub-new-template-assigned');
+    document.body.appendChild(el);
+  });
+
+  teardown(function() {
+    document.body.removeChild(el);
+  });
+
+  test('template', function() {
+    assert.equal(el.prop2, 'prop2');
+    assert.equal(el.$.subContent.textContent, el.prop2);
+    assert.notOk(el.$.content);
+  });
+});
+
 suite('extend sub-class template', function() {
   let el, baseEl;
   setup(function() {