Disallow non-templates as interpolations in Polymer.html

lib/utils/html-tag.html

@@ -12,13 +12,31 @@
   (function() {
     'use strict';
 
+    class HTMLLiteral {
+      constructor(string) {
+        this.innerHTML = string;
+      }
+    }
+
+    /**
+     * @param {*} value Object to stringify into HTML
+     * @return {string} HTML stringified form of `obj`
+     */
+    function literalValue(value) {
+      if (value instanceof HTMLLiteral) {
+        return /** @type {!HTMLLiteral} */(value).innerHTML;
+      } else {
+        throw new Error(`non-literal value passed to Polymer.htmlLiteral: ${value}`);
+      }
+    }
+
     /**
      * @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;
+      if (value instanceof HTMLTemplateElement || value instanceof HTMLLiteral) {
+        return /** @type {!HTMLTemplateElement | !HTMLLiteral} */(value).innerHTML;
       } else {
         throw new Error(`non-template value passed to Polymer.html: ${value}`);
       }
@@ -32,7 +50,7 @@
      *
      * Templates can be composed by interpolating `HTMLTemplateElement`s in
      * expressions in the JavaScript template literal. The nested template's
-     * `innerHTML` is inluced in the containing template.
+     * `innerHTML` is included in the containing template.
      *
      * All other values are disallowed in expressions to help prevent XSS
      * attacks.
@@ -59,5 +77,33 @@
         acc + htmlValue(v) + strings[idx + 1], strings[0]);
       return template;
     };
+
+    /**
+     * An html literal tag that can be used with `Polymer.html` to compose.
+     * a literal string.
+     *
+     * Example:
+     *
+     *   static get template() {
+     *     return Polymer.html`
+     *       <style>
+     *         :host { display: block; }
+     *         ${styleTemplate}
+     *       </style>
+     *       <div class="shadowed">${staticValue}</div>
+     *       ${super.template}
+     *     `;
+     *   }
+     *   static get styleTemplate() { return Polymer.htmlLiteral`.shadowed { background: gray; }`; }
+     *
+     * @memberof Polymer
+     * @param {!ITemplateArray} strings Constant parts of tagged template literal
+     * @param {...*} values Variable parts of tagged template literal
+     * @return {!HTMLLiteral} Constructed literal string
+     */
+    Polymer.htmlLiteral = function(strings, ...values) {
+      return new HTMLLiteral(values.reduce((acc, v, idx) =>
+        acc + literalValue(v) + strings[idx + 1], strings[0]));
+    }
   })();
 </script>