html-tag.html

<!--
@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 {!ITemplateArray} 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
      /** @type {!Array<string>} */
      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>