Merge pull request #5661 from Polymer/5660-template-function

Accept function in legacy _template field for template parsing

lib/mixins/element-mixin.js

@@ -488,9 +488,14 @@ export const ElementMixin = dedupingMixin(base => {
       //     or set in registered(); once the static getter runs, a clone of it
       //     will overwrite it on the prototype as the working template.
       if (!this.hasOwnProperty(JSCompiler_renameProperty('_template', this))) {
-        const protoTemplate = this.prototype.hasOwnProperty(
+        let protoTemplate = this.prototype.hasOwnProperty(
           JSCompiler_renameProperty('_template', this.prototype)) ?
           this.prototype._template : undefined;
+        // Accept a function for the legacy Polymer({_template:...}) field for
+        // lazy parsing
+        if (typeof protoTemplate === 'function') {
+          protoTemplate = protoTemplate();
+        }
         this._template =
           // If user has put template on prototype (e.g. in legacy via registered
           // callback or info object), prefer that first. Note that `null` is

test/unit/behaviors.html

@@ -347,6 +347,23 @@
       ]
     });
 
+    const getTemplateFromFunction = () => html`<div id="from-function">[[prop]]</div>`;
+    Polymer({
+      is: 'template-from-function',
+      properties: { prop: {value: 'from-function'} },
+      _template: getTemplateFromFunction
+    });
+
+    const getTemplateFromBehaviorFunction = () => html`<div id="from-behavior-function">[[prop]]</div>`;
+    const functionTemplateBehavior = {
+      _template: getTemplateFromBehaviorFunction
+    };
+    Polymer({
+      is: 'template-from-behavior-function',
+      properties: { prop: {value: 'from-behavior-function'} },
+      behaviors: [functionTemplateBehavior]
+    });
+
     window.ModifyObserversBehavior = {
 
       __barChangedCalled: 0,
@@ -495,6 +512,19 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="from-function">
+    <template>
+      <template-from-function></template-from-function>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="from-behavior-function">
+    <template>
+      <template-from-behavior-function></template-from-behavior-function>
+    </template>
+  </test-fixture>
+
+
   <test-fixture id="modify-observers-via-behavior">
     <template>
       <modify-observers-via-behavior></modify-observers-via-behavior>
@@ -649,7 +679,6 @@
 
 });
 
-
 suite('multi-behaviors element', function() {
   var el;
 
@@ -792,6 +821,24 @@
 
 });
 
+suite('template from function', function() {
+
+  test('template function assigned to _template', () => {
+    var el = fixture('from-function');
+    const div = el.shadowRoot.querySelector('#from-function');
+    assert.ok(div);
+    assert.equal(div.textContent, 'from-function');
+  });
+
+  test('template function assigned to _template in behavior', () => {
+    var el = fixture('from-behavior-function');
+    const div = el.shadowRoot.querySelector('#from-behavior-function');
+    assert.ok(div);
+    assert.equal(div.textContent, 'from-behavior-function');
+  });
+
+});
+
 </script>
 
 </body>