From 22ac86a8e3987c3f6b9195165d017f0f552d4995 Mon Sep 17 00:00:00 2001
From: Kevin Schaaf <kschaaf@google.com>
Date: Thu, 14 May 2020 16:21:23 -0700
Subject: [PATCH] Accept function in legacy _template field for template
 parsing. Fixes #5660

---
 lib/mixins/element-mixin.js |  7 +++++-
 test/unit/behaviors.html    | 49 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/lib/mixins/element-mixin.js b/lib/mixins/element-mixin.js
index 5fd49929f2..76b7f3ff28 100644
--- a/lib/mixins/element-mixin.js
+++ b/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
diff --git a/test/unit/behaviors.html b/test/unit/behaviors.html
index 6af4b6512b..25ebf85b47 100644
--- a/test/unit/behaviors.html
+++ b/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>