From fbf95c02f627c83efb0f95a35720cfa6d284957b Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Mon, 18 Nov 2019 07:59:40 +1100
Subject: [PATCH 01/26] support native CSSStyleSheet

---
 src/lib/css-tag.ts                   | 12 +++--
 src/lit-element.ts                   | 75 ++++++++++++++++++----------
 src/test/lit-element_styling_test.ts | 30 +++++++++++
 3 files changed, 86 insertions(+), 31 deletions(-)

diff --git a/src/lib/css-tag.ts b/src/lib/css-tag.ts
index 471939f5..a921884e 100644
--- a/src/lib/css-tag.ts
+++ b/src/lib/css-tag.ts
@@ -12,8 +12,9 @@ found at http://polymer.github.io/PATENTS.txt
 /**
  * Whether the current browser supports `adoptedStyleSheets`.
  */
-export const supportsAdoptingStyleSheets =
-    ('adoptedStyleSheets' in Document.prototype) &&
+export const supportsAdoptingShadowStyleSheets =
+    (window.ShadowRoot) &&
+    ('adoptedStyleSheets' in ShadowRoot.prototype) &&
     ('replace' in CSSStyleSheet.prototype);
 
 const constructionToken = Symbol();
@@ -28,6 +29,7 @@ export class CSSResult {
       throw new Error(
           'CSSResult is not constructable. Use `unsafeCSS` or `css` instead.');
     }
+
     this.cssText = cssText;
   }
 
@@ -35,9 +37,9 @@ export class CSSResult {
   // stylesheets are not created until the first element instance is made.
   get styleSheet(): CSSStyleSheet|null {
     if (this._styleSheet === undefined) {
-      // Note, if `adoptedStyleSheets` is supported then we assume CSSStyleSheet
-      // is constructable.
-      if (supportsAdoptingStyleSheets) {
+      // Note, if `supportsAdoptingShadowStyleSheets` is supported then we
+      // assume CSSStyleSheet is constructable.
+      if (supportsAdoptingShadowStyleSheets) {
         this._styleSheet = new CSSStyleSheet();
         this._styleSheet.replaceSync(this.cssText);
       } else {
diff --git a/src/lit-element.ts b/src/lit-element.ts
index 41817d94..ed3dc266 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -18,7 +18,7 @@ import {PropertyValues, UpdatingElement} from './lib/updating-element.js';
 export * from './lib/updating-element.js';
 export * from './lib/decorators.js';
 export {html, svg, TemplateResult, SVGTemplateResult} from 'lit-html/lit-html.js';
-import {supportsAdoptingStyleSheets, CSSResult} from './lib/css-tag.js';
+import {supportsAdoptingShadowStyleSheets, CSSResult} from './lib/css-tag.js';
 export * from './lib/css-tag.js';
 
 declare global {
@@ -33,7 +33,9 @@ declare global {
 (window['litElementVersions'] || (window['litElementVersions'] = []))
     .push('2.3.1');
 
-export interface CSSResultArray extends Array<CSSResult|CSSResultArray> {}
+export type CSSResultOrNative = CSSResult|CSSStyleSheet;
+
+export interface CSSResultArray extends Array<CSSResultOrNative|CSSResultArray> {}
 
 /**
  * Sentinal value used to avoid calling lit-html's render function when
@@ -82,9 +84,10 @@ export class LitElement extends UpdatingElement {
    * Array of styles to apply to the element. The styles should be defined
    * using the [[`css`]] tag function.
    */
-  static styles?: CSSResult|CSSResultArray;
+  static styles?: CSSResultOrNative|CSSResultArray;
 
   private static _styles: CSSResult[]|undefined;
+  private static _nativeStyles: CSSStyleSheet[]|undefined;
 
   /**
    * Return the array of styles to apply to the element.
@@ -92,26 +95,25 @@ export class LitElement extends UpdatingElement {
    *
    * @nocollapse
    */
-  static getStyles(): CSSResult|CSSResultArray|undefined {
+  static getStyles(): CSSResultOrNative|CSSResultArray|undefined {
     return this.styles;
   }
 
   /** @nocollapse */
   private static _getUniqueStyles() {
     // Only gather styles once per class
-    if (this.hasOwnProperty(JSCompiler_renameProperty('_styles', this))) {
+    const property = supportsAdoptingShadowStyleSheets ?
+        JSCompiler_renameProperty('_nativeStyles', this) :
+        JSCompiler_renameProperty('_styles', this);
+    if (this.hasOwnProperty(property)) {
       return;
     }
     // Take care not to call `this.getStyles()` multiple times since this
     // generates new CSSResults each time.
-    // TODO(sorvell): Since we do not cache CSSResults by input, any
-    // shared styles will generate new stylesheet objects, which is wasteful.
-    // This should be addressed when a browser ships constructable
-    // stylesheets.
-    const userStyles = this.getStyles();
-    if (userStyles === undefined) {
-      this._styles = [];
-    } else if (Array.isArray(userStyles)) {
+    const userStyles = this.styles!;
+    const work = [];
+
+    if (Array.isArray(userStyles)) {
       // De-duplicate styles preserving the _last_ instance in the set.
       // This is a performance optimization to avoid duplicated styles that can
       // occur especially when composing via subclassing.
@@ -119,20 +121,38 @@ export class LitElement extends UpdatingElement {
       // assumption that it's most important that last added styles override
       // previous styles.
       const addStyles =
-          (styles: CSSResultArray, set: Set<CSSResult>): Set<CSSResult> =>
+          (styles: CSSResultArray, set: Set<CSSResultOrNative>): Set<CSSResultOrNative> =>
               styles.reduceRight(
-                  (set: Set<CSSResult>, s) =>
+                  (set: Set<CSSResultOrNative>, s) =>
                       // Note: On IE set.add() does not return the set
                   Array.isArray(s) ? addStyles(s, set) : (set.add(s), set),
                   set);
       // Array.from does not work on Set in IE, otherwise return
       // Array.from(addStyles(userStyles, new Set<CSSResult>())).reverse()
-      const set = addStyles(userStyles, new Set<CSSResult>());
-      const styles: CSSResult[] = [];
-      set.forEach((v) => styles.unshift(v));
-      this._styles = styles;
+      const set = addStyles(userStyles, new Set<CSSResultOrNative>());
+      set.forEach((v) => work.unshift(v));
+    } else if (userStyles !== undefined) {
+      work.push(userStyles);
+    }
+
+    if (supportsAdoptingShadowStyleSheets) {
+      // Convert all CSSResult instances to native CSSStyleSheet.
+      this._nativeStyles = work.map((resultOrNative) => {
+        if (resultOrNative instanceof CSSResult) {
+          return resultOrNative.styleSheet!;
+        }
+        return resultOrNative;
+      });
     } else {
-      this._styles = [userStyles];
+      // This is only possible when a user passes a CSSStyleSheet that was
+      // read from a <style> or <link rel="stylesheet"> tag, which are not
+      // constructible stylesheets.
+      work.forEach((resultOrNative) => {
+        if (resultOrNative instanceof CSSStyleSheet) {
+          throw new Error('Can\'t adopt non-constructed stylesheets.');
+        }
+      });
+      this._styles = <CSSResult[]> work;
     }
   }
 
@@ -174,8 +194,8 @@ export class LitElement extends UpdatingElement {
   }
 
   /**
-   * Applies styling to the element shadowRoot using the [[`styles`]]
-   * property. Styling will apply using `shadowRoot.adoptedStyleSheets` where
+   * Applies styling to the element shadowRoot using the private styles
+   * properties. Styling will apply using `shadowRoot.adoptedStyleSheets` where
    * available and will fallback otherwise. When Shadow DOM is polyfilled,
    * ShadyCSS scopes styles and adds them to the document. When Shadow DOM
    * is available but `adoptedStyleSheets` is not, styles are appended to the
@@ -183,21 +203,24 @@ export class LitElement extends UpdatingElement {
    * behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
    */
   protected adoptStyles() {
+    if (supportsAdoptingShadowStyleSheets) {
+      (this.renderRoot as ShadowRoot).adoptedStyleSheets =
+          (this.constructor as typeof LitElement)._nativeStyles!;
+      return;
+    }
+
     const styles = (this.constructor as typeof LitElement)._styles!;
     if (styles.length === 0) {
       return;
     }
     // There are three separate cases here based on Shadow DOM support.
     // (1) shadowRoot polyfilled: use ShadyCSS
-    // (2) shadowRoot.adoptedStyleSheets available: use it.
+    // (2) shadowRoot.adoptedStyleSheets available: use it (above)
     // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after
     // rendering
     if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {
       window.ShadyCSS.ScopingShim!.prepareAdoptedCssText(
           styles.map((s) => s.cssText), this.localName);
-    } else if (supportsAdoptingStyleSheets) {
-      (this.renderRoot as ShadowRoot).adoptedStyleSheets =
-          styles.map((s) => s.styleSheet!);
     } else {
       // This must be done after rendering so the actual style insertion is done
       // in `update`.
diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index 686803a5..0d560fd5 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -890,6 +890,36 @@ suite('Static get styles', () => {
 
         document.body.removeChild(element);
       });
+
+  // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
+  // detectable in that case.
+  const testNativeAdoptedStyleSheets =
+      (typeof ShadowRoot === 'object') &&
+      ('adoptedStyleSheets' in window.ShadowRoot.prototype);
+  (testNativeAdoptedStyleSheets ? test : test.skip)(
+      'Can return CSSStyleSheet where adoptedStyleSheets are natively supported',
+      async () => {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync('div { background: red; }');
+
+        const base = generateElementName();
+        customElements.define(base, class extends LitElement {
+          static styles = sheet;
+
+          render() {
+            return htmlWithStyles`<div></div>`;
+          }
+        });
+
+        const el = document.createElement(base);
+        container.appendChild(el);
+        await (el as LitElement).updateComplete;
+        const div = el.shadowRoot!.querySelector('div');
+
+        // FIXME: error to prove this is running
+        assert.equal(
+          getComputedStyle(div!).getPropertyValue('background').trim(), 'blue');
+      });
 });
 
 suite('ShadyDOM', () => {

From ee8305703b24cf4caa8588a7ff5a9aa38bf81e47 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Mon, 18 Nov 2019 09:46:24 +1100
Subject: [PATCH 02/26] fix test

---
 src/test/lit-element_styling_test.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index 0d560fd5..3358f892 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -894,13 +894,13 @@ suite('Static get styles', () => {
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
   // detectable in that case.
   const testNativeAdoptedStyleSheets =
-      (typeof ShadowRoot === 'object') &&
+      (typeof ShadowRoot === 'function') &&
       ('adoptedStyleSheets' in window.ShadowRoot.prototype);
   (testNativeAdoptedStyleSheets ? test : test.skip)(
       'Can return CSSStyleSheet where adoptedStyleSheets are natively supported',
       async () => {
         const sheet = new CSSStyleSheet();
-        sheet.replaceSync('div { background: red; }');
+        sheet.replaceSync('div { border: 4px solid red; }');
 
         const base = generateElementName();
         customElements.define(base, class extends LitElement {
@@ -916,7 +916,6 @@ suite('Static get styles', () => {
         await (el as LitElement).updateComplete;
         const div = el.shadowRoot!.querySelector('div');
 
-        // FIXME: error to prove this is running
         assert.equal(
           getComputedStyle(div!).getPropertyValue('background').trim(), 'blue');
       });

From 6e5cc4190a61edc931609f9259eab17f6510d503 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 21 Feb 2020 15:48:10 +1100
Subject: [PATCH 03/26] comment tweaks

---
 src/lib/css-tag.ts | 4 ++--
 src/lit-element.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/css-tag.ts b/src/lib/css-tag.ts
index a921884e..3a92b36f 100644
--- a/src/lib/css-tag.ts
+++ b/src/lib/css-tag.ts
@@ -37,8 +37,8 @@ export class CSSResult {
   // stylesheets are not created until the first element instance is made.
   get styleSheet(): CSSStyleSheet|null {
     if (this._styleSheet === undefined) {
-      // Note, if `supportsAdoptingShadowStyleSheets` is supported then we
-      // assume CSSStyleSheet is constructable.
+      // Note, if `supportsAdoptingShadowStyleSheets` is true then we assume
+      // CSSStyleSheet is constructable.
       if (supportsAdoptingShadowStyleSheets) {
         this._styleSheet = new CSSStyleSheet();
         this._styleSheet.replaceSync(this.cssText);
diff --git a/src/lit-element.ts b/src/lit-element.ts
index ed3dc266..6778e3c2 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -82,7 +82,7 @@ export class LitElement extends UpdatingElement {
 
   /**
    * Array of styles to apply to the element. The styles should be defined
-   * using the [[`css`]] tag function.
+   * using the `css` tag function or via constructible stylesheets.
    */
   static styles?: CSSResultOrNative|CSSResultArray;
 
@@ -145,7 +145,7 @@ export class LitElement extends UpdatingElement {
       });
     } else {
       // This is only possible when a user passes a CSSStyleSheet that was
-      // read from a <style> or <link rel="stylesheet"> tag, which are not
+      // obtained from a <style> or <link rel="stylesheet"> tag: these are not
       // constructible stylesheets.
       work.forEach((resultOrNative) => {
         if (resultOrNative instanceof CSSStyleSheet) {

From b7165909804acc8cc5d4e20860c9d11c6a8f77bb Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 21 Feb 2020 18:46:33 +1100
Subject: [PATCH 04/26] use getStyles(), check with test

---
 src/lit-element.ts                   |  2 +-
 src/test/lit-element_styling_test.ts | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lit-element.ts b/src/lit-element.ts
index 6778e3c2..4e9ac312 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -110,7 +110,7 @@ export class LitElement extends UpdatingElement {
     }
     // Take care not to call `this.getStyles()` multiple times since this
     // generates new CSSResults each time.
-    const userStyles = this.styles!;
+    const userStyles = this.getStyles();
     const work = [];
 
     if (Array.isArray(userStyles)) {
diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index 3358f892..6ef171ae 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -792,10 +792,16 @@ suite('Static get styles', () => {
 
   test('element class only gathers styles once', async () => {
     const base = generateElementName();
-    let styleCounter = 0;
+    let getStylesCounter = 0;
+    let stylesCounter = 0;
     customElements.define(base, class extends LitElement {
+      static getStyles() {
+        getStylesCounter++;
+        return super.getStyles();
+      }
+
       static get styles() {
-        styleCounter++;
+        stylesCounter++;
         return css`:host {
           border: 10px solid black;
         }`;
@@ -821,7 +827,9 @@ suite('Static get styles', () => {
         '10px',
         'el2 styled correctly');
     assert.equal(
-        styleCounter, 1, 'styles property should only be accessed once');
+        stylesCounter, 1, 'styles property should only be accessed once');
+    assert.equal(
+      getStylesCounter, 1, 'getStyles() should be called once');
   });
 
   test(

From 024abcbea53e9f8668088ed368d6e96e3d238293 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 21 Feb 2020 18:52:45 +1100
Subject: [PATCH 05/26] fix test

---
 src/test/lit-element_styling_test.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index 6ef171ae..ea97fadb 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -922,10 +922,12 @@ suite('Static get styles', () => {
         const el = document.createElement(base);
         container.appendChild(el);
         await (el as LitElement).updateComplete;
-        const div = el.shadowRoot!.querySelector('div');
-
+        const div = el.shadowRoot!.querySelector('div')!;
         assert.equal(
-          getComputedStyle(div!).getPropertyValue('background').trim(), 'blue');
+            getComputedStyle(div)
+                .getPropertyValue('border-top-width')
+                .trim(),
+            '4px');
       });
 });
 

From e535bc9039a5917361eae2cba95ae124c9e9b431 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Sat, 21 Mar 2020 09:13:19 +1100
Subject: [PATCH 06/26] review feedback

---
 src/lib/css-tag.ts |  6 +++---
 src/lit-element.ts | 17 +++++++++++------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/lib/css-tag.ts b/src/lib/css-tag.ts
index 3a92b36f..1b1213f2 100644
--- a/src/lib/css-tag.ts
+++ b/src/lib/css-tag.ts
@@ -12,7 +12,7 @@ found at http://polymer.github.io/PATENTS.txt
 /**
  * Whether the current browser supports `adoptedStyleSheets`.
  */
-export const supportsAdoptingShadowStyleSheets =
+export const supportsAdoptingStyleSheets =
     (window.ShadowRoot) &&
     ('adoptedStyleSheets' in ShadowRoot.prototype) &&
     ('replace' in CSSStyleSheet.prototype);
@@ -37,9 +37,9 @@ export class CSSResult {
   // stylesheets are not created until the first element instance is made.
   get styleSheet(): CSSStyleSheet|null {
     if (this._styleSheet === undefined) {
-      // Note, if `supportsAdoptingShadowStyleSheets` is true then we assume
+      // Note, if `supportsAdoptingStyleSheets` is true then we assume
       // CSSStyleSheet is constructable.
-      if (supportsAdoptingShadowStyleSheets) {
+      if (supportsAdoptingStyleSheets) {
         this._styleSheet = new CSSStyleSheet();
         this._styleSheet.replaceSync(this.cssText);
       } else {
diff --git a/src/lit-element.ts b/src/lit-element.ts
index 4e9ac312..4aeac6cc 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -18,7 +18,7 @@ import {PropertyValues, UpdatingElement} from './lib/updating-element.js';
 export * from './lib/updating-element.js';
 export * from './lib/decorators.js';
 export {html, svg, TemplateResult, SVGTemplateResult} from 'lit-html/lit-html.js';
-import {supportsAdoptingShadowStyleSheets, CSSResult} from './lib/css-tag.js';
+import {supportsAdoptingStyleSheets, CSSResult} from './lib/css-tag.js';
 export * from './lib/css-tag.js';
 
 declare global {
@@ -87,6 +87,11 @@ export class LitElement extends UpdatingElement {
   static styles?: CSSResultOrNative|CSSResultArray;
 
   private static _styles: CSSResult[]|undefined;
+
+  /**
+   * Native CSSStyleSheet to apply to the element. Used over `_styles` when
+   * native support is available.
+   */
   private static _nativeStyles: CSSStyleSheet[]|undefined;
 
   /**
@@ -102,7 +107,7 @@ export class LitElement extends UpdatingElement {
   /** @nocollapse */
   private static _getUniqueStyles() {
     // Only gather styles once per class
-    const property = supportsAdoptingShadowStyleSheets ?
+    const property = supportsAdoptingStyleSheets ?
         JSCompiler_renameProperty('_nativeStyles', this) :
         JSCompiler_renameProperty('_styles', this);
     if (this.hasOwnProperty(property)) {
@@ -135,7 +140,7 @@ export class LitElement extends UpdatingElement {
       work.push(userStyles);
     }
 
-    if (supportsAdoptingShadowStyleSheets) {
+    if (supportsAdoptingStyleSheets) {
       // Convert all CSSResult instances to native CSSStyleSheet.
       this._nativeStyles = work.map((resultOrNative) => {
         if (resultOrNative instanceof CSSResult) {
@@ -194,8 +199,8 @@ export class LitElement extends UpdatingElement {
   }
 
   /**
-   * Applies styling to the element shadowRoot using the private styles
-   * properties. Styling will apply using `shadowRoot.adoptedStyleSheets` where
+   * Applies styling to the element shadowRoot using the `static get styles`
+   * property. Styling will apply using `shadowRoot.adoptedStyleSheets` where
    * available and will fallback otherwise. When Shadow DOM is polyfilled,
    * ShadyCSS scopes styles and adds them to the document. When Shadow DOM
    * is available but `adoptedStyleSheets` is not, styles are appended to the
@@ -203,7 +208,7 @@ export class LitElement extends UpdatingElement {
    * behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
    */
   protected adoptStyles() {
-    if (supportsAdoptingShadowStyleSheets) {
+    if (supportsAdoptingStyleSheets) {
       (this.renderRoot as ShadowRoot).adoptedStyleSheets =
           (this.constructor as typeof LitElement)._nativeStyles!;
       return;

From f7009ad2bf15acd15ec16c6702746ad6620919e4 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Tue, 7 Apr 2020 13:30:17 +1000
Subject: [PATCH 07/26] fix bad merge

---
 src/lit-element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lit-element.ts b/src/lit-element.ts
index 4aeac6cc..6f321031 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -82,7 +82,7 @@ export class LitElement extends UpdatingElement {
 
   /**
    * Array of styles to apply to the element. The styles should be defined
-   * using the `css` tag function or via constructible stylesheets.
+   * using the [[`css`]] tag function or via constructible stylesheets.
    */
   static styles?: CSSResultOrNative|CSSResultArray;
 

From a24cb6381b3ec6549b9b7b5ecb63c35e21593c90 Mon Sep 17 00:00:00 2001
From: Justin Fagnani <justinfagnani@google.com>
Date: Mon, 6 Apr 2020 19:49:23 -0700
Subject: [PATCH 08/26] Use only one styles array

---
 src/lib/css-tag.ts                   |  3 +-
 src/lit-element.ts                   | 61 ++++++++--------------------
 src/test/lit-element_styling_test.ts | 10 ++---
 3 files changed, 22 insertions(+), 52 deletions(-)

diff --git a/src/lib/css-tag.ts b/src/lib/css-tag.ts
index 1b1213f2..ffbc18b2 100644
--- a/src/lib/css-tag.ts
+++ b/src/lib/css-tag.ts
@@ -12,8 +12,7 @@ found at http://polymer.github.io/PATENTS.txt
 /**
  * Whether the current browser supports `adoptedStyleSheets`.
  */
-export const supportsAdoptingStyleSheets =
-    (window.ShadowRoot) &&
+export const supportsAdoptingStyleSheets = (window.ShadowRoot) &&
     ('adoptedStyleSheets' in ShadowRoot.prototype) &&
     ('replace' in CSSStyleSheet.prototype);
 
diff --git a/src/lit-element.ts b/src/lit-element.ts
index 6f321031..861f2f0b 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -35,7 +35,8 @@ declare global {
 
 export type CSSResultOrNative = CSSResult|CSSStyleSheet;
 
-export interface CSSResultArray extends Array<CSSResultOrNative|CSSResultArray> {}
+export interface CSSResultArray extends
+    Array<CSSResultOrNative|CSSResultArray> {}
 
 /**
  * Sentinal value used to avoid calling lit-html's render function when
@@ -86,13 +87,13 @@ export class LitElement extends UpdatingElement {
    */
   static styles?: CSSResultOrNative|CSSResultArray;
 
-  private static _styles: CSSResult[]|undefined;
+  private static _styles: Array<CSSResultOrNative|CSSResult>|undefined;
 
   /**
    * Native CSSStyleSheet to apply to the element. Used over `_styles` when
    * native support is available.
    */
-  private static _nativeStyles: CSSStyleSheet[]|undefined;
+  // private static _nativeStyles: CSSStyleSheet[]|undefined;
 
   /**
    * Return the array of styles to apply to the element.
@@ -107,16 +108,12 @@ export class LitElement extends UpdatingElement {
   /** @nocollapse */
   private static _getUniqueStyles() {
     // Only gather styles once per class
-    const property = supportsAdoptingStyleSheets ?
-        JSCompiler_renameProperty('_nativeStyles', this) :
-        JSCompiler_renameProperty('_styles', this);
-    if (this.hasOwnProperty(property)) {
+    if (this.hasOwnProperty(JSCompiler_renameProperty('_styles', this))) {
       return;
     }
     // Take care not to call `this.getStyles()` multiple times since this
     // generates new CSSResults each time.
     const userStyles = this.getStyles();
-    const work = [];
 
     if (Array.isArray(userStyles)) {
       // De-duplicate styles preserving the _last_ instance in the set.
@@ -125,39 +122,20 @@ export class LitElement extends UpdatingElement {
       // The last item is kept to try to preserve the cascade order with the
       // assumption that it's most important that last added styles override
       // previous styles.
-      const addStyles =
-          (styles: CSSResultArray, set: Set<CSSResultOrNative>): Set<CSSResultOrNative> =>
-              styles.reduceRight(
-                  (set: Set<CSSResultOrNative>, s) =>
-                      // Note: On IE set.add() does not return the set
-                  Array.isArray(s) ? addStyles(s, set) : (set.add(s), set),
-                  set);
+      const addStyles = (styles: CSSResultArray, set: Set<CSSResultOrNative>):
+          Set<CSSResultOrNative> => styles.reduceRight(
+              (set: Set<CSSResultOrNative>, s) =>
+                  // Note: On IE set.add() does not return the set
+              Array.isArray(s) ? addStyles(s, set) : (set.add(s), set),
+              set);
       // Array.from does not work on Set in IE, otherwise return
       // Array.from(addStyles(userStyles, new Set<CSSResult>())).reverse()
       const set = addStyles(userStyles, new Set<CSSResultOrNative>());
-      set.forEach((v) => work.unshift(v));
-    } else if (userStyles !== undefined) {
-      work.push(userStyles);
-    }
-
-    if (supportsAdoptingStyleSheets) {
-      // Convert all CSSResult instances to native CSSStyleSheet.
-      this._nativeStyles = work.map((resultOrNative) => {
-        if (resultOrNative instanceof CSSResult) {
-          return resultOrNative.styleSheet!;
-        }
-        return resultOrNative;
-      });
+      const styles: CSSResultOrNative[] = [];
+      set.forEach((v) => styles.unshift(v));
+      this._styles = styles;
     } else {
-      // This is only possible when a user passes a CSSStyleSheet that was
-      // obtained from a <style> or <link rel="stylesheet"> tag: these are not
-      // constructible stylesheets.
-      work.forEach((resultOrNative) => {
-        if (resultOrNative instanceof CSSStyleSheet) {
-          throw new Error('Can\'t adopt non-constructed stylesheets.');
-        }
-      });
-      this._styles = <CSSResult[]> work;
+      this._styles = userStyles === undefined ? [] : [userStyles];
     }
   }
 
@@ -208,12 +186,6 @@ export class LitElement extends UpdatingElement {
    * behavior](https://wicg.github.io/construct-stylesheets/#using-constructed-stylesheets).
    */
   protected adoptStyles() {
-    if (supportsAdoptingStyleSheets) {
-      (this.renderRoot as ShadowRoot).adoptedStyleSheets =
-          (this.constructor as typeof LitElement)._nativeStyles!;
-      return;
-    }
-
     const styles = (this.constructor as typeof LitElement)._styles!;
     if (styles.length === 0) {
       return;
@@ -226,6 +198,9 @@ export class LitElement extends UpdatingElement {
     if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {
       window.ShadyCSS.ScopingShim!.prepareAdoptedCssText(
           styles.map((s) => s.cssText), this.localName);
+    } else if (supportsAdoptingStyleSheets) {
+      (this.renderRoot as ShadowRoot).adoptedStyleSheets =
+          styles.map((s) => s instanceof CSSStyleSheet ? s : s.styleSheet!);
     } else {
       // This must be done after rendering so the actual style insertion is done
       // in `update`.
diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index ea97fadb..abcea952 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -828,8 +828,7 @@ suite('Static get styles', () => {
         'el2 styled correctly');
     assert.equal(
         stylesCounter, 1, 'styles property should only be accessed once');
-    assert.equal(
-      getStylesCounter, 1, 'getStyles() should be called once');
+    assert.equal(getStylesCounter, 1, 'getStyles() should be called once');
   });
 
   test(
@@ -901,8 +900,7 @@ suite('Static get styles', () => {
 
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
   // detectable in that case.
-  const testNativeAdoptedStyleSheets =
-      (typeof ShadowRoot === 'function') &&
+  const testNativeAdoptedStyleSheets = (typeof ShadowRoot === 'function') &&
       ('adoptedStyleSheets' in window.ShadowRoot.prototype);
   (testNativeAdoptedStyleSheets ? test : test.skip)(
       'Can return CSSStyleSheet where adoptedStyleSheets are natively supported',
@@ -924,9 +922,7 @@ suite('Static get styles', () => {
         await (el as LitElement).updateComplete;
         const div = el.shadowRoot!.querySelector('div')!;
         assert.equal(
-            getComputedStyle(div)
-                .getPropertyValue('border-top-width')
-                .trim(),
+            getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '4px');
       });
 });

From 0c2821a1172143562ee20a3678ec87dc4b4720fa Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Tue, 7 Apr 2020 13:32:46 +1000
Subject: [PATCH 09/26] fix comments after justin's change

---
 src/lit-element.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/lit-element.ts b/src/lit-element.ts
index 861f2f0b..6a7688c7 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -89,12 +89,6 @@ export class LitElement extends UpdatingElement {
 
   private static _styles: Array<CSSResultOrNative|CSSResult>|undefined;
 
-  /**
-   * Native CSSStyleSheet to apply to the element. Used over `_styles` when
-   * native support is available.
-   */
-  // private static _nativeStyles: CSSStyleSheet[]|undefined;
-
   /**
    * Return the array of styles to apply to the element.
    * Override this method to integrate into a style management system.
@@ -192,7 +186,7 @@ export class LitElement extends UpdatingElement {
     }
     // There are three separate cases here based on Shadow DOM support.
     // (1) shadowRoot polyfilled: use ShadyCSS
-    // (2) shadowRoot.adoptedStyleSheets available: use it (above)
+    // (2) shadowRoot.adoptedStyleSheets available: use it
     // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after
     // rendering
     if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {

From d90c070a0559e0da0485bf1933a01e13058412a6 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Wed, 8 Apr 2020 09:01:31 +1000
Subject: [PATCH 10/26] review feedback

---
 src/lib/css-tag.ts | 2 +-
 src/lit-element.ts | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/css-tag.ts b/src/lib/css-tag.ts
index ffbc18b2..8ecb1257 100644
--- a/src/lib/css-tag.ts
+++ b/src/lib/css-tag.ts
@@ -13,7 +13,7 @@ found at http://polymer.github.io/PATENTS.txt
  * Whether the current browser supports `adoptedStyleSheets`.
  */
 export const supportsAdoptingStyleSheets = (window.ShadowRoot) &&
-    ('adoptedStyleSheets' in ShadowRoot.prototype) &&
+    ('adoptedStyleSheets' in Document.prototype) &&
     ('replace' in CSSStyleSheet.prototype);
 
 const constructionToken = Symbol();
diff --git a/src/lit-element.ts b/src/lit-element.ts
index 6a7688c7..1f4ab312 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -107,6 +107,10 @@ export class LitElement extends UpdatingElement {
     }
     // Take care not to call `this.getStyles()` multiple times since this
     // generates new CSSResults each time.
+    // TODO(sorvell): Since we do not cache CSSResults by input, any
+    // shared styles will generate new stylesheet objects, which is wasteful.
+    // This should be addressed when a browser ships constructable
+    // stylesheets.
     const userStyles = this.getStyles();
 
     if (Array.isArray(userStyles)) {
@@ -171,7 +175,7 @@ export class LitElement extends UpdatingElement {
   }
 
   /**
-   * Applies styling to the element shadowRoot using the `static get styles`
+   * Applies styling to the element shadowRoot using the [[`styles`]]
    * property. Styling will apply using `shadowRoot.adoptedStyleSheets` where
    * available and will fallback otherwise. When Shadow DOM is polyfilled,
    * ShadyCSS scopes styles and adds them to the document. When Shadow DOM

From 94286e420fdb3302f4df0906f25e9f97ba57d231 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 10:08:51 +1000
Subject: [PATCH 11/26] flatten sheets where possible

---
 src/lib/css-tag.ts                   |  1 +
 src/lit-element.ts                   | 19 ++++++++++++++++++-
 src/test/lit-element_styling_test.ts | 27 +++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/lib/css-tag.ts b/src/lib/css-tag.ts
index 8ecb1257..9e59dd36 100644
--- a/src/lib/css-tag.ts
+++ b/src/lib/css-tag.ts
@@ -13,6 +13,7 @@ found at http://polymer.github.io/PATENTS.txt
  * Whether the current browser supports `adoptedStyleSheets`.
  */
 export const supportsAdoptingStyleSheets = (window.ShadowRoot) &&
+    (window.ShadyCSS === undefined) &&
     ('adoptedStyleSheets' in Document.prototype) &&
     ('replace' in CSSStyleSheet.prototype);
 
diff --git a/src/lit-element.ts b/src/lit-element.ts
index 1f4ab312..f1582ac0 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -18,7 +18,7 @@ import {PropertyValues, UpdatingElement} from './lib/updating-element.js';
 export * from './lib/updating-element.js';
 export * from './lib/decorators.js';
 export {html, svg, TemplateResult, SVGTemplateResult} from 'lit-html/lit-html.js';
-import {supportsAdoptingStyleSheets, CSSResult} from './lib/css-tag.js';
+import {supportsAdoptingStyleSheets, CSSResult, unsafeCSS, css} from './lib/css-tag.js';
 export * from './lib/css-tag.js';
 
 declare global {
@@ -135,6 +135,23 @@ export class LitElement extends UpdatingElement {
     } else {
       this._styles = userStyles === undefined ? [] : [userStyles];
     }
+
+    // Map any invalid CSSStyleSheet instances to a flattened CSSResult. They
+    // are invalid in two conditions.
+    // (1) the sheet is non-constructible (`sheet` of a HTMLStyleElement)
+    // (2) the ShadyCSS polyfill is enabled (:. supportsAdoptingStyleSheets is false)
+    // In both cases, the user might have expected to update their stylesheets
+    // over time, but the alternative was a crash.
+    this._styles = this._styles.map((s) => {
+      if (s instanceof CSSStyleSheet && 
+          (s.ownerNode || !supportsAdoptingStyleSheets)) {
+        const cssText = Array.prototype.slice.call(s.cssRules)
+            .map((rule) => rule.cssText)
+            .join('');
+        return unsafeCSS(cssText);
+      }
+      return s;
+    });
   }
 
   private _needsShimAdoptedStyleSheets?: boolean;
diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index abcea952..bb87b073 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -898,6 +898,33 @@ suite('Static get styles', () => {
         document.body.removeChild(element);
       });
 
+  test(
+      'Non-adoptible stylesheet is flattened to a CSSResult',
+      async () => {
+        const s = document.createElement('style');
+        s.textContent = `@media (max-width: 768px) { #_adoptible_test { color: red; } }`;
+        container.appendChild(s);
+        const sheetFromStyle = s.sheet;
+        container.removeChild(s);
+
+        const base = generateElementName();
+        customElements.define(base, class extends LitElement {
+          static styles = (sheetFromStyle as CSSStyleSheet);
+
+          render() {
+            return htmlWithStyles`<div id="_adoptible_test"></div>`;
+          }
+        });
+
+        const el = document.createElement(base);
+        container.appendChild(el);
+        await (el as LitElement).updateComplete;
+        const div = el.shadowRoot!.querySelector('div')!;
+        assert.equal(
+            getComputedStyle(div).getPropertyValue('color').trim(),
+            'red');
+      });
+
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
   // detectable in that case.
   const testNativeAdoptedStyleSheets = (typeof ShadowRoot === 'function') &&

From 8742ab5c8b0f434ee17229a8299b9f822ab67c7d Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 10:17:04 +1000
Subject: [PATCH 12/26] remove unused import

---
 src/lit-element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lit-element.ts b/src/lit-element.ts
index f1582ac0..ccf4728b 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -18,7 +18,7 @@ import {PropertyValues, UpdatingElement} from './lib/updating-element.js';
 export * from './lib/updating-element.js';
 export * from './lib/decorators.js';
 export {html, svg, TemplateResult, SVGTemplateResult} from 'lit-html/lit-html.js';
-import {supportsAdoptingStyleSheets, CSSResult, unsafeCSS, css} from './lib/css-tag.js';
+import {supportsAdoptingStyleSheets, CSSResult, unsafeCSS} from './lib/css-tag.js';
 export * from './lib/css-tag.js';
 
 declare global {

From 5dc558e7f29b9c5c9225ef082fe14f96acfa7db4 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 10:23:42 +1000
Subject: [PATCH 13/26] fix missing whitespace

---
 src/lit-element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lit-element.ts b/src/lit-element.ts
index ccf4728b..592a497c 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -143,7 +143,7 @@ export class LitElement extends UpdatingElement {
     // In both cases, the user might have expected to update their stylesheets
     // over time, but the alternative was a crash.
     this._styles = this._styles.map((s) => {
-      if (s instanceof CSSStyleSheet && 
+      if (s instanceof CSSStyleSheet &&
           (s.ownerNode || !supportsAdoptingStyleSheets)) {
         const cssText = Array.prototype.slice.call(s.cssRules)
             .map((rule) => rule.cssText)

From f64ed5167880d81599125bbc01a1e5eb35a113c2 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 10:28:26 +1000
Subject: [PATCH 14/26] use the same test as every other element

---
 src/test/lit-element_styling_test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index bb87b073..b9ee1b52 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -902,7 +902,7 @@ suite('Static get styles', () => {
       'Non-adoptible stylesheet is flattened to a CSSResult',
       async () => {
         const s = document.createElement('style');
-        s.textContent = `@media (max-width: 768px) { #_adoptible_test { color: red; } }`;
+        s.textContent = `@media (max-width: 768px) { #_adoptible_test { border: 4px solid red; } }`;
         container.appendChild(s);
         const sheetFromStyle = s.sheet;
         container.removeChild(s);
@@ -921,8 +921,8 @@ suite('Static get styles', () => {
         await (el as LitElement).updateComplete;
         const div = el.shadowRoot!.querySelector('div')!;
         assert.equal(
-            getComputedStyle(div).getPropertyValue('color').trim(),
-            'red');
+            getComputedStyle(div).getPropertyValue('border-top-width').trim(),
+            '4px');
       });
 
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily

From 33f3b716f835b2b416483caffca243d23732fd62 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 10:49:17 +1000
Subject: [PATCH 15/26] change to throw for <style>.sheet, add tests

---
 src/lit-element.ts                   | 32 +++++++++-----
 src/test/lit-element_styling_test.ts | 65 +++++++++++++++++++++++-----
 2 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/src/lit-element.ts b/src/lit-element.ts
index 592a497c..e4e975a2 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -136,19 +136,27 @@ export class LitElement extends UpdatingElement {
       this._styles = userStyles === undefined ? [] : [userStyles];
     }
 
-    // Map any invalid CSSStyleSheet instances to a flattened CSSResult. They
-    // are invalid in two conditions.
-    // (1) the sheet is non-constructible (`sheet` of a HTMLStyleElement)
-    // (2) the ShadyCSS polyfill is enabled (:. supportsAdoptingStyleSheets is false)
-    // In both cases, the user might have expected to update their stylesheets
-    // over time, but the alternative was a crash.
+    // Ensure that there are no invalid CSSStyleSheet instances here. They are
+    // invalid in two conditions.
+    // (1) the sheet is non-constructible (`sheet` of a HTMLStyleElement), in
+    //     this case an Error is thrown
+    // (2) the ShadyCSS polyfill is enabled (:. supportsAdoptingStyleSheets is
+    //     false)
     this._styles = this._styles.map((s) => {
-      if (s instanceof CSSStyleSheet &&
-          (s.ownerNode || !supportsAdoptingStyleSheets)) {
-        const cssText = Array.prototype.slice.call(s.cssRules)
-            .map((rule) => rule.cssText)
-            .join('');
-        return unsafeCSS(cssText);
+      if (s instanceof CSSStyleSheet) {
+        if (s.ownerNode) {
+          throw new Error(`CSSStyleSheet instances used in 'styles' cannot ` +
+              `come from <style> tags.`);
+        }
+        if (!supportsAdoptingStyleSheets) {
+          // Flatten the cssText from the passed constructible stylesheet. The
+          // user might have expected to update their stylesheets over time,
+          // but the alternative was a crash.
+          const cssText = Array.prototype.slice.call(s.cssRules)
+              .map((rule) => rule.cssText)
+              .join('');
+          return unsafeCSS(cssText);
+        }
       }
       return s;
     });
diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index b9ee1b52..5d7b3970 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -899,7 +899,7 @@ suite('Static get styles', () => {
       });
 
   test(
-      'Non-adoptible stylesheet is flattened to a CSSResult',
+      'Non-adoptible stylesheet is disallowed',
       async () => {
         const s = document.createElement('style');
         s.textContent = `@media (max-width: 768px) { #_adoptible_test { border: 4px solid red; } }`;
@@ -910,19 +910,17 @@ suite('Static get styles', () => {
         const base = generateElementName();
         customElements.define(base, class extends LitElement {
           static styles = (sheetFromStyle as CSSStyleSheet);
-
-          render() {
-            return htmlWithStyles`<div id="_adoptible_test"></div>`;
-          }
         });
 
         const el = document.createElement(base);
         container.appendChild(el);
-        await (el as LitElement).updateComplete;
-        const div = el.shadowRoot!.querySelector('div')!;
-        assert.equal(
-            getComputedStyle(div).getPropertyValue('border-top-width').trim(),
-            '4px');
+
+        try {
+          await (el as LitElement).updateComplete;
+          assert.fail('update should fail as <style>.sheet is disallowed');
+        } catch (e) {
+          // ok
+        }
       });
 
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
@@ -951,6 +949,53 @@ suite('Static get styles', () => {
         assert.equal(
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '4px');
+
+        sheet.replaceSync('div { border: 2px solid red; }');
+        assert.equal(
+          getComputedStyle(div).getPropertyValue('border-top-width').trim(),
+          '2px');
+      });
+
+  // Test that when ShadyCSS is enabled _even with_ native support, we can return
+  // a CSSStyleSheet that will be flattened and play nice with others.
+  const testShadyCSSWithAdoptedStyleSheetSupport = (window.ShadyCSS !== undefined) &&
+        testNativeAdoptedStyleSheets;
+  (testShadyCSSWithAdoptedStyleSheetSupport ? test : test.skip)(
+      async () => {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync('div { border: 4px solid red; }');
+        const normal = css`span { border: 4px solid blue; }`;
+
+        const base = generateElementName();
+        customElements.define(base, class extends LitElement {
+          static styles = [sheet, normal]
+
+          render() {
+            return htmlWithStyles`<div></div><span></span>`;
+          }
+        });
+
+        const el = document.createElement(base);
+        container.appendChild(el);
+        await (el as LitElement).updateComplete;
+
+        // CSSStyleSheet
+        const div = el.shadowRoot!.querySelector('div')!;
+        assert.equal(
+            getComputedStyle(div).getPropertyValue('border-top-width').trim(),
+            '4px');
+
+        // css-tag
+        const span = el.shadowRoot!.querySelector('span')!;
+        assert.equal(
+            getComputedStyle(span).getPropertyValue('border-top-width').trim(),
+            '4px');
+
+        // CSSStyleSheet update
+        sheet.replaceSync('div { border: 2px solid red; }');
+        assert.equal(
+          getComputedStyle(div).getPropertyValue('border-top-width').trim(),
+          '4px', 'CSS should not reflect CSSStyleSheet as it was flattened');
       });
 });
 

From 626ef41d882503ccaa03628caa040c38dd38a145 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 10:54:20 +1000
Subject: [PATCH 16/26] semicolon

---
 src/test/lit-element_styling_test.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index 5d7b3970..2fd843e2 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -968,7 +968,7 @@ suite('Static get styles', () => {
 
         const base = generateElementName();
         customElements.define(base, class extends LitElement {
-          static styles = [sheet, normal]
+          static styles = [sheet, normal];
 
           render() {
             return htmlWithStyles`<div></div><span></span>`;
@@ -979,19 +979,17 @@ suite('Static get styles', () => {
         container.appendChild(el);
         await (el as LitElement).updateComplete;
 
-        // CSSStyleSheet
         const div = el.shadowRoot!.querySelector('div')!;
         assert.equal(
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '4px');
 
-        // css-tag
         const span = el.shadowRoot!.querySelector('span')!;
         assert.equal(
             getComputedStyle(span).getPropertyValue('border-top-width').trim(),
             '4px');
 
-        // CSSStyleSheet update
+        // CSSStyleSheet update should fail, as the styles will be flattened.
         sheet.replaceSync('div { border: 2px solid red; }');
         assert.equal(
           getComputedStyle(div).getPropertyValue('border-top-width').trim(),

From b8f878faa1af1a8b4e19bbef650774dba5bd4f71 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 10:59:16 +1000
Subject: [PATCH 17/26] missed test name

---
 src/test/lit-element_styling_test.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index 2fd843e2..871f635b 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -952,8 +952,8 @@ suite('Static get styles', () => {
 
         sheet.replaceSync('div { border: 2px solid red; }');
         assert.equal(
-          getComputedStyle(div).getPropertyValue('border-top-width').trim(),
-          '2px');
+            getComputedStyle(div).getPropertyValue('border-top-width').trim(),
+            '2px');
       });
 
   // Test that when ShadyCSS is enabled _even with_ native support, we can return
@@ -961,6 +961,7 @@ suite('Static get styles', () => {
   const testShadyCSSWithAdoptedStyleSheetSupport = (window.ShadyCSS !== undefined) &&
         testNativeAdoptedStyleSheets;
   (testShadyCSSWithAdoptedStyleSheetSupport ? test : test.skip)(
+      'CSSStyleSheet is flattened where ShadyCSS is enabled yet adoptedStyleSheets are supported',
       async () => {
         const sheet = new CSSStyleSheet();
         sheet.replaceSync('div { border: 4px solid red; }');
@@ -992,8 +993,8 @@ suite('Static get styles', () => {
         // CSSStyleSheet update should fail, as the styles will be flattened.
         sheet.replaceSync('div { border: 2px solid red; }');
         assert.equal(
-          getComputedStyle(div).getPropertyValue('border-top-width').trim(),
-          '4px', 'CSS should not reflect CSSStyleSheet as it was flattened');
+            getComputedStyle(div).getPropertyValue('border-top-width').trim(),
+            '4px', 'CSS should not reflect CSSStyleSheet as it was flattened');
       });
 });
 

From 3c42e5b43effb5e4f5dd0ece704daebd3be1d125 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <samthor@users.noreply.github.com>
Date: Fri, 10 Apr 2020 11:04:53 +1000
Subject: [PATCH 18/26] Update src/lit-element.ts

Co-Authored-By: Steve Orvell <sorvell@google.com>
---
 src/lit-element.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lit-element.ts b/src/lit-element.ts
index e4e975a2..460443f7 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -152,7 +152,7 @@ export class LitElement extends UpdatingElement {
           // Flatten the cssText from the passed constructible stylesheet. The
           // user might have expected to update their stylesheets over time,
           // but the alternative was a crash.
-          const cssText = Array.prototype.slice.call(s.cssRules)
+          const cssText = Array.prototype.slice.call(s.cssRules).reduce((css, rule) => css + rule.cssText, '');
               .map((rule) => rule.cssText)
               .join('');
           return unsafeCSS(cssText);

From 0e4df4a4140aa7b081f20a2a0edf1570599cdb02 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 11:06:42 +1000
Subject: [PATCH 19/26] fix bad suggestion merge

---
 src/lit-element.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/lit-element.ts b/src/lit-element.ts
index 460443f7..8c0c5d8c 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -152,9 +152,8 @@ export class LitElement extends UpdatingElement {
           // Flatten the cssText from the passed constructible stylesheet. The
           // user might have expected to update their stylesheets over time,
           // but the alternative was a crash.
-          const cssText = Array.prototype.slice.call(s.cssRules).reduce((css, rule) => css + rule.cssText, '');
-              .map((rule) => rule.cssText)
-              .join('');
+          const cssText = Array.prototype.slice.call(s.cssRules)
+              .reduce((css, rule) => css + rule.cssText, '');
           return unsafeCSS(cssText);
         }
       }

From 2db7cd902324d00324dfedb4b87c6212093c832c Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 11:07:19 +1000
Subject: [PATCH 20/26] fix test running cases

---
 src/test/lit-element_styling_test.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index 871f635b..b76189d2 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -924,8 +924,9 @@ suite('Static get styles', () => {
       });
 
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
-  // detectable in that case.
-  const testNativeAdoptedStyleSheets = (typeof ShadowRoot === 'function') &&
+  // detectable in that case. Look explicitly for no ShadyCSS.
+  const testNativeAdoptedStyleSheets = (window.ShadyCSS === undefined) &&
+      (typeof ShadowRoot === 'function') &&
       ('adoptedStyleSheets' in window.ShadowRoot.prototype);
   (testNativeAdoptedStyleSheets ? test : test.skip)(
       'Can return CSSStyleSheet where adoptedStyleSheets are natively supported',
@@ -959,7 +960,8 @@ suite('Static get styles', () => {
   // Test that when ShadyCSS is enabled _even with_ native support, we can return
   // a CSSStyleSheet that will be flattened and play nice with others.
   const testShadyCSSWithAdoptedStyleSheetSupport = (window.ShadyCSS !== undefined) &&
-        testNativeAdoptedStyleSheets;
+      (typeof ShadowRoot === 'function') &&
+      ('adoptedStyleSheets' in window.ShadowRoot.prototype);
   (testShadyCSSWithAdoptedStyleSheetSupport ? test : test.skip)(
       'CSSStyleSheet is flattened where ShadyCSS is enabled yet adoptedStyleSheets are supported',
       async () => {

From b0daa0409915426606f0552002ec6e3477641608 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <samthor@users.noreply.github.com>
Date: Fri, 10 Apr 2020 11:44:54 +1000
Subject: [PATCH 21/26] Update src/lib/css-tag.ts

Co-Authored-By: Steve Orvell <sorvell@google.com>
---
 src/lib/css-tag.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/css-tag.ts b/src/lib/css-tag.ts
index 9e59dd36..47e41685 100644
--- a/src/lib/css-tag.ts
+++ b/src/lib/css-tag.ts
@@ -13,7 +13,7 @@ found at http://polymer.github.io/PATENTS.txt
  * Whether the current browser supports `adoptedStyleSheets`.
  */
 export const supportsAdoptingStyleSheets = (window.ShadowRoot) &&
-    (window.ShadyCSS === undefined) &&
+    (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow) &&
     ('adoptedStyleSheets' in Document.prototype) &&
     ('replace' in CSSStyleSheet.prototype);
 

From 3c257629287f2edb6dea48605a3309b81103e1e4 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 12:40:03 +1000
Subject: [PATCH 22/26] fix test and change flattening behavior

---
 src/lit-element.ts                   | 25 ++++++++++---------------
 src/test/lit-element_styling_test.ts | 14 ++++++++------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/lit-element.ts b/src/lit-element.ts
index 8c0c5d8c..f56965dd 100644
--- a/src/lit-element.ts
+++ b/src/lit-element.ts
@@ -138,24 +138,19 @@ export class LitElement extends UpdatingElement {
 
     // Ensure that there are no invalid CSSStyleSheet instances here. They are
     // invalid in two conditions.
-    // (1) the sheet is non-constructible (`sheet` of a HTMLStyleElement), in
-    //     this case an Error is thrown
+    // (1) the sheet is non-constructible (`sheet` of a HTMLStyleElement), but
+    //     this is impossible to check except via .replaceSync or use
     // (2) the ShadyCSS polyfill is enabled (:. supportsAdoptingStyleSheets is
     //     false)
     this._styles = this._styles.map((s) => {
-      if (s instanceof CSSStyleSheet) {
-        if (s.ownerNode) {
-          throw new Error(`CSSStyleSheet instances used in 'styles' cannot ` +
-              `come from <style> tags.`);
-        }
-        if (!supportsAdoptingStyleSheets) {
-          // Flatten the cssText from the passed constructible stylesheet. The
-          // user might have expected to update their stylesheets over time,
-          // but the alternative was a crash.
-          const cssText = Array.prototype.slice.call(s.cssRules)
-              .reduce((css, rule) => css + rule.cssText, '');
-          return unsafeCSS(cssText);
-        }
+      if (s instanceof CSSStyleSheet && !supportsAdoptingStyleSheets) {
+        // Flatten the cssText from the passed constructible stylesheet (or
+        // undetectable non-constructible stylesheet). The user might have
+        // expected to update their stylesheets over time, but the alternative
+        // is a crash.
+        const cssText = Array.prototype.slice.call(s.cssRules)
+            .reduce((css, rule) => css + rule.cssText, '');
+        return unsafeCSS(cssText);
       }
       return s;
     });
diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index b76189d2..c44427d2 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -925,7 +925,7 @@ suite('Static get styles', () => {
 
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
   // detectable in that case. Look explicitly for no ShadyCSS.
-  const testNativeAdoptedStyleSheets = (window.ShadyCSS === undefined) &&
+  const testNativeAdoptedStyleSheets =(window.ShadyCSS === undefined) &&
       (typeof ShadowRoot === 'function') &&
       ('adoptedStyleSheets' in window.ShadowRoot.prototype);
   (testNativeAdoptedStyleSheets ? test : test.skip)(
@@ -951,17 +951,19 @@ suite('Static get styles', () => {
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '4px');
 
+        // The CSSStyleSheet isn't flattened, so changes can take effect.
         sheet.replaceSync('div { border: 2px solid red; }');
         assert.equal(
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '2px');
       });
 
-  // Test that when ShadyCSS is enabled _even with_ native support, we can return
-  // a CSSStyleSheet that will be flattened and play nice with others.
-  const testShadyCSSWithAdoptedStyleSheetSupport = (window.ShadyCSS !== undefined) &&
-      (typeof ShadowRoot === 'function') &&
-      ('adoptedStyleSheets' in window.ShadowRoot.prototype);
+  // Test that when ShadyCSS is enabled with native support for
+  // adoptedStyleSheets, we can return a CSSStyleSheet that will be flattened
+  // and play nice with others.
+  const testShadyCSSWithAdoptedStyleSheetSupport = (typeof ShadowRoot === 'function') &&
+      ('adoptedStyleSheets' in window.ShadowRoot.prototype) &&
+      (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow);
   (testShadyCSSWithAdoptedStyleSheetSupport ? test : test.skip)(
       'CSSStyleSheet is flattened where ShadyCSS is enabled yet adoptedStyleSheets are supported',
       async () => {

From edd8668577e456f11046b75267f2d53a6cbd4c48 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 12:43:04 +1000
Subject: [PATCH 23/26] eslint

---
 src/test/lit-element_styling_test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index c44427d2..d6604c59 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -925,7 +925,7 @@ suite('Static get styles', () => {
 
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
   // detectable in that case. Look explicitly for no ShadyCSS.
-  const testNativeAdoptedStyleSheets =(window.ShadyCSS === undefined) &&
+  const testNativeAdoptedStyleSheets = (window.ShadyCSS === undefined) &&
       (typeof ShadowRoot === 'function') &&
       ('adoptedStyleSheets' in window.ShadowRoot.prototype);
   (testNativeAdoptedStyleSheets ? test : test.skip)(

From 9b01c1c5106172e4cebcaf1ede242bfd55d8155c Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 12:54:34 +1000
Subject: [PATCH 24/26] move throws check earlier

---
 src/test/lit-element_styling_test.ts | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index d6604c59..4f05098b 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -912,15 +912,10 @@ suite('Static get styles', () => {
           static styles = (sheetFromStyle as CSSStyleSheet);
         });
 
-        const el = document.createElement(base);
-        container.appendChild(el);
-
-        try {
-          await (el as LitElement).updateComplete;
-          assert.fail('update should fail as <style>.sheet is disallowed');
-        } catch (e) {
-          // ok
-        }
+        assert.throws(() => {
+          const el = document.createElement(base);
+          container.appendChild(el);
+        });
       });
 
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily

From 2aa7ec7c3b0f6b4d315532fe7e8845cbd7091136 Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Thu, 9 Apr 2020 20:56:36 -0700
Subject: [PATCH 25/26] fix tests

---
 src/test/lit-element_styling_test.ts | 33 ++++++++--------------------
 1 file changed, 9 insertions(+), 24 deletions(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index 4f05098b..72ab937f 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -898,32 +898,12 @@ suite('Static get styles', () => {
         document.body.removeChild(element);
       });
 
-  test(
-      'Non-adoptible stylesheet is disallowed',
-      async () => {
-        const s = document.createElement('style');
-        s.textContent = `@media (max-width: 768px) { #_adoptible_test { border: 4px solid red; } }`;
-        container.appendChild(s);
-        const sheetFromStyle = s.sheet;
-        container.removeChild(s);
-
-        const base = generateElementName();
-        customElements.define(base, class extends LitElement {
-          static styles = (sheetFromStyle as CSSStyleSheet);
-        });
-
-        assert.throws(() => {
-          const el = document.createElement(base);
-          container.appendChild(el);
-        });
-      });
-
   // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
   // detectable in that case. Look explicitly for no ShadyCSS.
-  const testNativeAdoptedStyleSheets = (window.ShadyCSS === undefined) &&
+  const testAdoptedStyleSheets =
       (typeof ShadowRoot === 'function') &&
       ('adoptedStyleSheets' in window.ShadowRoot.prototype);
-  (testNativeAdoptedStyleSheets ? test : test.skip)(
+  (testAdoptedStyleSheets ? test : test.skip)(
       'Can return CSSStyleSheet where adoptedStyleSheets are natively supported',
       async () => {
         const sheet = new CSSStyleSheet();
@@ -946,11 +926,16 @@ suite('Static get styles', () => {
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '4px');
 
-        // The CSSStyleSheet isn't flattened, so changes can take effect.
+        // When the WC polyfills are included, calling .replaceSync is a noop to
+        // our styles as they're already flattened (so expect 4px). Otherwise,
+        // look for the updated value.
+        const flattenDueToPolyfill = (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow);
+        const expectedValue = flattenDueToPolyfill ? '4px' : '2px';
         sheet.replaceSync('div { border: 2px solid red; }');
+
         assert.equal(
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
-            '2px');
+            expectedValue);
       });
 
   // Test that when ShadyCSS is enabled with native support for

From c172c04af6a9d645d04b713d231c44c9c4ad5dfc Mon Sep 17 00:00:00 2001
From: Sam Thorogood <sam.thorogood@gmail.com>
Date: Fri, 10 Apr 2020 15:56:18 -0700
Subject: [PATCH 26/26] restructure tests a bit

---
 src/test/lit-element_styling_test.ts | 39 ++++++++++++++--------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
index 72ab937f..02b1bb88 100644
--- a/src/test/lit-element_styling_test.ts
+++ b/src/test/lit-element_styling_test.ts
@@ -898,23 +898,22 @@ suite('Static get styles', () => {
         document.body.removeChild(element);
       });
 
-  // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
-  // detectable in that case. Look explicitly for no ShadyCSS.
   const testAdoptedStyleSheets =
-      (typeof ShadowRoot === 'function') &&
-      ('adoptedStyleSheets' in window.ShadowRoot.prototype);
+      (window.ShadowRoot) &&
+      ('replace' in CSSStyleSheet.prototype);
   (testAdoptedStyleSheets ? test : test.skip)(
       'Can return CSSStyleSheet where adoptedStyleSheets are natively supported',
       async () => {
         const sheet = new CSSStyleSheet();
         sheet.replaceSync('div { border: 4px solid red; }');
+        const normal = css`span { border: 4px solid blue; }`;
 
         const base = generateElementName();
         customElements.define(base, class extends LitElement {
-          static styles = sheet;
+          static styles = [sheet, normal];
 
           render() {
-            return htmlWithStyles`<div></div>`;
+            return htmlWithStyles`<div></div><span></span>`;
           }
         });
 
@@ -926,11 +925,16 @@ suite('Static get styles', () => {
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '4px');
 
+        const span = el.shadowRoot!.querySelector('span')!;
+        assert.equal(
+            getComputedStyle(span).getPropertyValue('border-top-width').trim(),
+            '4px');
+
         // When the WC polyfills are included, calling .replaceSync is a noop to
         // our styles as they're already flattened (so expect 4px). Otherwise,
         // look for the updated value.
-        const flattenDueToPolyfill = (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow);
-        const expectedValue = flattenDueToPolyfill ? '4px' : '2px';
+        const usesAdoptedStyleSheet = (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow);
+        const expectedValue = usesAdoptedStyleSheet ? '2px' : '4px';
         sheet.replaceSync('div { border: 2px solid red; }');
 
         assert.equal(
@@ -938,25 +942,25 @@ suite('Static get styles', () => {
             expectedValue);
       });
 
-  // Test that when ShadyCSS is enabled with native support for
-  // adoptedStyleSheets, we can return a CSSStyleSheet that will be flattened
+  // Test that when ShadyCSS is enabled (while still having native support for
+  // adoptedStyleSheets), we can return a CSSStyleSheet that will be flattened
   // and play nice with others.
-  const testShadyCSSWithAdoptedStyleSheetSupport = (typeof ShadowRoot === 'function') &&
-      ('adoptedStyleSheets' in window.ShadowRoot.prototype) &&
+  const testShadyCSSWithAdoptedStyleSheetSupport =
+      (window.ShadowRoot) &&
+      ('replace' in CSSStyleSheet.prototype) &&
       (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow);
   (testShadyCSSWithAdoptedStyleSheetSupport ? test : test.skip)(
       'CSSStyleSheet is flattened where ShadyCSS is enabled yet adoptedStyleSheets are supported',
       async () => {
         const sheet = new CSSStyleSheet();
         sheet.replaceSync('div { border: 4px solid red; }');
-        const normal = css`span { border: 4px solid blue; }`;
 
         const base = generateElementName();
         customElements.define(base, class extends LitElement {
-          static styles = [sheet, normal];
+          static styles = sheet;
 
           render() {
-            return htmlWithStyles`<div></div><span></span>`;
+            return htmlWithStyles`<div></div>`;
           }
         });
 
@@ -969,11 +973,6 @@ suite('Static get styles', () => {
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '4px');
 
-        const span = el.shadowRoot!.querySelector('span')!;
-        assert.equal(
-            getComputedStyle(span).getPropertyValue('border-top-width').trim(),
-            '4px');
-
         // CSSStyleSheet update should fail, as the styles will be flattened.
         sheet.replaceSync('div { border: 2px solid red; }');
         assert.equal(