diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6767f5aa..a842cb21 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Change Log
 
+## [v2.3.1](https://github.com/Polymer/polymer/tree/v2.3.1) (2017-12-07)
+- Add test that would fail with the "last style" behavior in master ([commit](https://github.com/Polymer/polymer/commit/913dfce6))
+
+- Use padding-top to get correct computed style on older safari ([commit](https://github.com/Polymer/polymer/commit/b7c56173))
+
+- Handle styles that are not direct children of templates correctly ([commit](https://github.com/Polymer/polymer/commit/0b1cd70a))
+
+- [ci skip] update changelog again ([commit](https://github.com/Polymer/polymer/commit/2d739c75))
+
 ## [v2.3.0](https://github.com/Polymer/polymer/tree/v2.3.0) (2017-12-05)
 - [ci skip] update changelog ([commit](https://github.com/Polymer/polymer/commit/c727d35d))
 
diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
index 26e1a38c..87c77db1 100644
--- a/lib/mixins/element-mixin.html
+++ b/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);
       }
diff --git a/lib/utils/boot.html b/lib/utils/boot.html
index 18625479..3ca20b3b 100644
--- a/lib/utils/boot.html
+++ b/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 */
   /*
diff --git a/lib/utils/flattened-nodes-observer.html b/lib/utils/flattened-nodes-observer.html
index f5985229..78f74127 100644
--- a/lib/utils/flattened-nodes-observer.html
+++ b/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`.
diff --git a/lib/utils/html-tag.html b/lib/utils/html-tag.html
new file mode 100644
index 00000000..77f2429f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a915d6ed..a328431e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@polymer/polymer",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index c0d8e4da..7ba5ceb7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@polymer/polymer",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to write",
   "main": "polymer.html",
   "directories": {
diff --git a/polymer-element.html b/polymer-element.html
index 9b8f911a..aeb4a0e1 100644
--- a/polymer-element.html
+++ b/polymer-element.html
@@ -8,6 +8,8 @@ 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="lib/mixins/element-mixin.html">
+<!-- import html-tag to export html -->
+<link rel="import" href="lib/utils/html-tag.html">
 <script>
 (function() {
   'use strict';
@@ -35,5 +37,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
    * @extends {HTMLElement}
    */
   Polymer.Element = Element;
+
+  // NOTE: this is here for modulizer to export `html` for the module version of this file
+  Polymer.html = Polymer.html;
 })();
 </script>
\ No newline at end of file
diff --git a/polymer.html b/polymer.html
index 0331373c..28552fdb 100644
--- a/polymer.html
+++ b/polymer.html
@@ -19,7 +19,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="lib/elements/custom-style.html">
 <!-- bc behaviors -->
 <link rel="import" href="lib/legacy/mutable-data-behavior.html">
+<!-- import html-tag to export html -->
+<link rel="import" href="lib/util/html-tag.html">
 <script>
   // bc
   Polymer.Base = Polymer.LegacyElementMixin(HTMLElement).prototype;
+
+  // NOTE: this is here for modulizer to export `html` for the module version of this file
+  Polymer.html = Polymer.html;
 </script>
diff --git a/test/runner.html b/test/runner.html
index 1133d53d..3c3137c0 100644
--- a/test/runner.html
+++ b/test/runner.html
@@ -77,6 +77,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       'unit/render-status.html',
       'unit/dir.html',
       'unit/shady-unscoped-style.html',
+      'unit/html-tag.html'
       // 'unit/multi-style.html'
     ];
 
@@ -117,7 +118,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       // ce + sd becomes a single test iteration.
       matrix.push('wc-ce=true&wc-shadydom=true');
     }
-    
+
     // economize testing by testing css shimming
     // only against 1 environment (native or polyfill).
     if (window.CSS && CSS.supports && CSS.supports('box-shadow', '0 0 0 var(--foo)')) {
diff --git a/test/smoke/html-tag.html b/test/smoke/html-tag.html
new file mode 100644
index 00000000..7f1ad95c
--- /dev/null
+++ b/test/smoke/html-tag.html
@@ -0,0 +1,64 @@
+<!DOCTYPE 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
+-->
+<html>
+<head>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../polymer-element.html">
+</head>
+<body>
+  <script>
+    const html = Polymer.html;
+    class SuperClass extends Polymer.Element {
+      static get is() {return 'super-class';}
+      static get template() {
+        return html`
+          <style>#name {color: red}</style>
+          <h3 id="name">${this.is}</h3>
+          <div>${this.headerTemplate}</div>
+          [[myProp.stuffThatGoesHere]]
+          <div>${this.footerTemplate}</div>
+        `;
+      }
+      static get headerTemplate() { return html`<h1>Header</h1>`; }
+      static get footerTemplate() { return html`<h1>Footer</h1>`; }
+    }
+    customElements.define(SuperClass.is, SuperClass);
+    class SubClass extends SuperClass {
+      static get is() {return 'sub-class';}
+      static get template() {
+        return html`
+          <style>.frame {font-style: italic}</style>
+          <div class="frame">${super.template}</div>
+          <div>\</div>
+        `;
+      }
+      constructor() {
+        super();
+        this.myProp = {stuffThatGoesHere: '!stuff that goes here!'};
+      }
+      static get headerTemplate() { return html`<h2>Sub-header</h2>`; }
+      static get footerTemplate() { return html`<h2>Sub-footer</h2>`; }
+    }
+    customElements.define(SubClass.is, SubClass);
+  </script>
+  <script>
+    class XString extends Polymer.Element {
+      static get is() {return 'x-string'};
+      static get template() {
+        return 'string template!';
+      }
+    }
+    customElements.define(XString.is, XString);
+  </script>
+  <super-class></super-class>
+  <sub-class></sub-class>
+  <x-string></x-string>
+</body>
\ No newline at end of file
diff --git a/test/unit/html-tag.html b/test/unit/html-tag.html
new file mode 100644
index 00000000..3fa75bd5
--- /dev/null
+++ b/test/unit/html-tag.html
@@ -0,0 +1,134 @@
+<!doctype 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
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <link rel="import" href="../../polymer.html">
+</head>
+<body>
+  <script>
+    suite('html function', function() {
+      test('html makes an HTML template', function() {
+        let t = Polymer.html``;
+        assert.instanceOf(t, HTMLTemplateElement);
+      });
+      test('template output has elements', function() {
+        let t = Polymer.html`<div><span></span></div><!-- hi -->`;
+        assert(t.content.querySelector('div'));
+        assert(t.content.querySelector('span'));
+        assert.instanceOf(t.content.lastChild, Comment);
+      });
+      test('escaping works as expected', function() {
+        let t = Polymer.html`<span>\f\o\o</span>`;
+        assert.equal(t.innerHTML, '<span>\\f\\o\\o</span>');
+      });
+      test('variables work', function() {
+        let a = 3;
+        let b = 'foo';
+        let t = Polymer.html`<div>${a} ${b}</div>`;
+        let inst = document.createElement('div');
+        inst.appendChild(t.content.cloneNode(true));
+        assert.equal(inst.textContent, `${a} ${b}`);
+      });
+      test('template variables only include the template contents', function() {
+        let t1 = Polymer.html`<div></div>`;
+        let t2 = Polymer.html`<span>${t1}</span>`;
+        assert.equal(t2.innerHTML, '<span><div></div></span>');
+      });
+    });
+    suite('Polymer + html fn', function() {
+      suiteSetup(function() {
+
+        class HtmlFn extends Polymer.Element {
+          static get is() {return 'html-fn';}
+          static get template() {
+            return Polymer.html`
+            <style>
+              :host {
+                display: block;
+              }
+            </style>
+            <div id="child">
+              [[databoundProperty]]
+            </div>
+            `;
+          }
+          static get properties() {
+            return {
+              databoundProperty: String
+            };
+          }
+          ready() {
+            super.ready();
+            this.databoundProperty = 'first';
+          }
+        }
+
+        customElements.define(HtmlFn.is, HtmlFn);
+
+        class HtmlFnSub extends HtmlFn {
+          static get is() {return 'html-fn-sub';}
+          static get template() {
+            return Polymer.html`
+            <div id="super">
+              ${super.template}
+            </div>
+            `;
+          }
+          ready() {
+            super.ready();
+            this.databoundProperty = 'second';
+          }
+        }
+
+        customElements.define(HtmlFnSub.is, HtmlFnSub);
+
+        Polymer({
+          is: 'html-legacy',
+          _template: Polymer.html`
+            <div id="child">[[databoundProperty]]</div>
+          `,
+          properties: {
+            databoundProperty: {
+              type: String,
+              value: 'legacy'
+            }
+          }
+        });
+      });
+
+      test('Polymer elements can use html fn', function () {
+        let el = document.createElement('html-fn');
+        document.body.appendChild(el);
+        assert(el.shadowRoot);
+        assert.equal(el.$.child.textContent.trim(), 'first');
+      });
+
+      test('subclass elements can embed the superclass template', function() {
+        let el = document.createElement('html-fn-sub');
+        document.body.appendChild(el);
+        assert(el.$.super);
+        assert(el.$.child);
+        assert.equal(el.$.child.textContent.trim(), 'second');
+      });
+
+      test('legacy element works with html fn', function() {
+        let el = document.createElement('html-legacy');
+        document.body.appendChild(el);
+        assert(el.shadowRoot);
+        assert.equal(el.$.child.textContent.trim(), 'legacy');
+      });
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
index 0330b19e..656a8ec1 100644
--- a/test/unit/styling-scoped.html
+++ b/test/unit/styling-scoped.html
@@ -660,6 +660,61 @@ HTMLImports.whenReady(function() {
   </x-specificity-parent>
   <x-overriding></x-overriding>
 
+  <dom-module id="nested-shared-style">
+    <template>
+      <style>
+        :host {
+          padding-top: 10px;
+        }
+      </style>
+    </template>
+  </dom-module>
+
+  <dom-module id="x-nested-style">
+    <template>
+      <div id="container">
+        <style include="nested-shared-style">
+          :host {
+            display: block;
+            border: 10px solid black;
+          }
+        </style>
+      </div>
+    </template>
+    <script>
+      addEventListener('WebComponentsReady', () => {
+        class XNestedStyle extends Polymer.Element {
+          static get is() {return 'x-nested-style';}
+        }
+        customElements.define(XNestedStyle.is, XNestedStyle);
+      });
+    </script>
+  </dom-module>
+
+  <dom-module id="x-interleaved-styles">
+    <template>
+      <style include="x-nested-style"></style>
+      <style>
+        :host {
+          padding-top: 5px;
+        }
+      </style>
+      <style>
+        :host {
+          color: blue;
+        }
+      </style>
+    </template>
+    <script>
+      addEventListener('WebComponentsReady', () => {
+        class XInterleaved extends Polymer.Element {
+          static get is() {return 'x-interleaved-styles';}
+        }
+        customElements.define(XInterleaved.is, XInterleaved);
+      });
+    </script>
+  </dom-module>
+
 <script>
 (function() {
   function assertComputed(element, value, property, pseudo) {
@@ -917,6 +972,19 @@ HTMLImports.whenReady(function() {
       assertComputed(e, '1px');
     });
 
+    test('styles work correctly when not direct children of the template', function() {
+      var e = document.createElement('x-nested-style');
+      document.body.appendChild(e);
+      assertComputed(e, '10px');
+      assertComputed(e, '10px', 'padding-top');
+    });
+
+    test('interleaved styles and styles with includes work as expected', function() {
+      var e = document.createElement('x-interleaved-styles');
+      document.body.appendChild(e);
+      assertComputed(e, '5px', 'padding-top');
+    });
+
   });
 
   if (window.ShadyDOM) {