Move style gathering from class finalization to initialization

By moving style gathering to initialization, stylesheets will only be
created for elements that have booted, and not for elements that have
only be registered.

This should be performance positive for applications with less than
ideal loading behaviors.

Author: dfreedm

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 * Properties annotated with the `eventOptions` decorator will now survive property renaming optimizations when used with tsickle and Closure JS Compiler.
+* Moved style gathering from `finalize` to `initialize` to be more lazy, and create stylesheets on the first instance initializing.
 
 <!-- ### Changed -->
 

src/lib/decorators.ts

@@ -265,7 +265,8 @@ export function eventOptions(options: AddEventListenerOptions) {
  * this property should be annotated as `NodeListOf<HTMLElement>`.
  *
  */
-export function queryAssignedNodes(slotName: string = '', flatten: boolean = false) {
+export function queryAssignedNodes(
+    slotName: string = '', flatten: boolean = false) {
   return (protoOrDescriptor: Object|ClassElement,
           // tslint:disable-next-line:no-any decorator
           name?: PropertyKey): any => {

src/lib/updating-element.ts

@@ -132,7 +132,8 @@ type AttributeMap = Map<string, PropertyKey>;
  * interface corresponding to the declared element properties.
  */
 // tslint:disable-next-line:no-any
-export type PropertyValues<T = any> = keyof T extends PropertyKey ? Map<keyof T, unknown> : never;
+export type PropertyValues<T = any> =
+    keyof T extends PropertyKey ? Map<keyof T, unknown>: never;
 
 export const defaultConverter: ComplexAttributeConverter = {
 

src/lit-element.ts

@@ -63,19 +63,6 @@ export class LitElement extends UpdatingElement {
 
   private static _styles: CSSResult[]|undefined;
 
-  /** @nocollapse */
-  protected static finalize() {
-    // The Closure JS Compiler does not always preserve the correct "this"
-    // when calling static super methods (b/137460243), so explicitly bind.
-    super.finalize.call(this);
-    // Prepare styling that is stamped at first render time. Styling
-    // is built from user provided `styles` or is inherited from the superclass.
-    this._styles =
-        this.hasOwnProperty(JSCompiler_renameProperty('styles', this)) ?
-        this._getUniqueStyles() :
-        this._styles || [];
-  }
-
   /** @nocollapse */
   private static _getUniqueStyles(): CSSResult[] {
     // Take care not to call `this.styles` multiple times since this generates
@@ -84,7 +71,10 @@ export class LitElement extends UpdatingElement {
     // shared styles will generate new stylesheet objects, which is wasteful.
     // This should be addressed when a browser ships constructable
     // stylesheets.
-    const userStyles = this.styles!;
+    const userStyles = this.styles;
+    if (userStyles === undefined) {
+      return [];
+    }
     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
@@ -109,6 +99,17 @@ export class LitElement extends UpdatingElement {
     return [userStyles];
   }
 
+  /** @nocollapse */
+  private static _initializeStyles() {
+    // Only initialize styles once per class
+    if (this.hasOwnProperty(JSCompiler_renameProperty('_styles', this))) {
+      return;
+    }
+    // Prepare styling that is stamped at first render time. Styling
+    // is built from user provided `styles` or is inherited from the superclass.
+    this._styles = this._getUniqueStyles();
+  }
+
   private _needsShimAdoptedStyleSheets?: boolean;
 
   /**
@@ -124,6 +125,7 @@ export class LitElement extends UpdatingElement {
    */
   protected initialize() {
     super.initialize();
+    (this.constructor as typeof LitElement)._initializeStyles();
     (this as {renderRoot: Element | DocumentFragment}).renderRoot =
         this.createRenderRoot();
     // Note, if renderRoot is not a shadowRoot, styles would/could apply to the

src/test/lib/decorators_test.ts

@@ -16,7 +16,8 @@ import {eventOptions, property} from '../../lib/decorators.js';
 import {customElement, html, LitElement, PropertyValues, query, queryAll, queryAssignedNodes} from '../../lit-element.js';
 import {generateElementName} from '../test-helpers.js';
 
-const flush = window.ShadyDOM && window.ShadyDOM.flush ? window.ShadyDOM.flush : () => {};
+const flush =
+    window.ShadyDOM && window.ShadyDOM.flush ? window.ShadyDOM.flush : () => {};
 
 // tslint:disable:no-any ok in tests
 

src/test/lit-element_styling_test.ts

@@ -788,6 +788,40 @@ suite('Static get styles', () => {
         '4px');
   });
 
+  test('element class only gathers styles once', async () => {
+    const base = generateElementName();
+    let styleCounter = 0;
+    customElements.define(base, class extends LitElement {
+      static get styles() {
+        styleCounter++;
+        return css`:host {
+          border: 10px solid black;
+        }`;
+      }
+      render() {
+        return htmlWithStyles`<div>styled</div>`;
+      }
+    });
+    const el1 = document.createElement(base);
+    const el2 = document.createElement(base);
+    container.appendChild(el1);
+    container.appendChild(el2);
+    await Promise.all([
+      (el1 as LitElement).updateComplete,
+      (el2 as LitElement).updateComplete
+    ]);
+    assert.equal(
+        getComputedStyle(el1).getPropertyValue('border-top-width').trim(),
+        '10px',
+        'el1 styled correctly');
+    assert.equal(
+        getComputedStyle(el2).getPropertyValue('border-top-width').trim(),
+        '10px',
+        'el2 styled correctly');
+    assert.equal(
+        styleCounter, 1, 'styles property should only be accessed once');
+  });
+
   test(
       '`CSSResult` allows for String type coercion via toString()',
       async () => {