Merge branch 'master' into basic-element

lib/mixins/element-mixin.html

@@ -249,16 +249,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     function processElementStyles(klass, template, is, baseURI) {
       const styles = Polymer.StyleGather.stylesFromModuleImports(is).concat(
         Polymer.StyleGather.stylesFromTemplate(template));
-      let templateStyles = template.content.querySelectorAll('style');
-      let lastStyle = templateStyles[templateStyles.length-1];
+      const templateStyles = template.content.querySelectorAll('style');
+      // keep track of the last "concrete" style in the template we have encountered
+      let templateStyleIndex = 0;
       // ensure all gathered styles are actually in this template.
       for (let i=0; i < styles.length; i++) {
         let s = styles[i];
+        let templateStyle = templateStyles[templateStyleIndex];
         // if the style is not in this template, it's been "included" and
-        // we put a clone of it in the template.
-        if (s.getRootNode() != template.content) {
+        // we put a clone of it in the template before the style that included it
+        if (templateStyle !== s) {
           s = s.cloneNode(true);
-          template.content.insertBefore(s, lastStyle);
+          templateStyle.parentNode.insertBefore(s, templateStyle);
+        } else {
+          templateStyleIndex++;
         }
         s.textContent = klass._processStyleText(s.textContent, baseURI);
       }

lib/utils/boot.html

@@ -49,7 +49,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   };
   /* eslint-enable */
 
-  window.Polymer.version = '2.3.0';
+  window.Polymer.version = '2.3.1';
 
   /* eslint-disable no-unused-vars */
   /*

lib/utils/flattened-nodes-observer.html

@@ -44,6 +44,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
    * `MutationObserver` and the `<slot>` element's `slotchange` event which
    * are asynchronous.
    *
+   * An example:
+   * ```js
+   * class TestSelfObserve extends Polymer.Element {
+   *   static get is() { return 'test-self-observe';}
+   *   connectedCallback() {
+   *     super.connectedCallback();
+   *     this._observer = new Polymer.FlattenedNodesObserver(this, (info) => {
+   *       this.info = info;
+   *     });
+   *   }
+   *   disconnectedCallback() {
+   *     super.disconnectedCallback();
+   *     this._observer.disconnect();
+   *   }
+   * }
+   * customElements.define(TestSelfObserve.is, TestSelfObserve);
+   * ```
+   *
    * @memberof Polymer
    * @summary Class that listens for changes (additions or removals) to
    * "flattened nodes" on a given `node`.

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>