Merge pull request #4971 from Polymer/html-template-fn

`html` tag function for generating templates

lib/mixins/element-mixin.html

@@ -270,6 +270,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       let template = /** @type {PolymerElementConstructor} */ (klass).template;
       if (template) {
         if (typeof template === 'string') {
+          // TODO(dan): Add link to docs explaining deprecation of string templates
+          console.warn('String templates are deprecated. ' +
+            `Please return a <template>, or use Polymer.html\`\` for element <${klass.is}>`);
           let t = document.createElement('template');
           t.innerHTML = template;
           template = t;

lib/utils/html-tag.html

@@ -0,0 +1,63 @@
+<!--
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="boot.html">
+<script>
+  (function() {
+    'use strict';
+
+    /**
+     * @param {*} value Object to stringify into HTML
+     * @return {string} HTML stringified form of `obj`
+     */
+    function htmlValue(value) {
+      if (value instanceof HTMLTemplateElement) {
+        return /** @type {!HTMLTemplateElement} */(value).innerHTML;
+      } else {
+        return String(value);
+      }
+    }
+
+    /**
+     * A template literal tag that creates an HTML <template> element from the contents of the string.
+     *
+     * This allows you to write a Polymer Template in JavaScript.
+     *
+     * Interpolated values are converted to strings when the template is created,
+     * they are not intended as a replacement for Polymer data-binding.
+     *
+     * There is special support for HTMLTemplateElement values,
+     * allowing for easy composition of superclass or partial templates.
+     *
+     * Example:
+     *
+     *   static get template() {
+     *     return Polymer.html`
+     *       <style>:host{ content:"..." }</style>
+     *       <div class="shadowed">${this.partialTemplate}</div>
+     *       ${super.template}
+     *     `;
+     *   }
+     *   static get partialTemplate() { return Polymer.html`<span>Partial!</span>`; }
+     *
+     * @memberof Polymer
+     * @param {!Array<string>} strings Constant parts of tagged template literal
+     * @param {...*} values Variable parts of tagged template literal
+     * @return {!HTMLTemplateElement} Constructed HTMLTemplateElement
+     */
+    Polymer.html = function html(strings, ...values) {
+      // use raw strings to preserve literal escapes in strings
+      const rawStrings = strings.raw;
+      const template = /** @type {!HTMLTemplateElement} */(document.createElement('template'));
+      template.innerHTML = values.reduce((acc, v, idx) =>
+        acc + htmlValue(v) + rawStrings[idx + 1], rawStrings[0]);
+      return template;
+    };
+  })();
+</script>