Move style gathering from class finalization to initialization

[dfreedm]

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.

Fixes #870

[dfreedm]

Also fixed a few formatting issues.

[web-padawan]

IMO, this is a breaking change. As an example, we are using finalize in VaadinThemableMixin to gather styles once per class.

Would it be possible to keep protected static finalize() as empty method?

@dfreedm @justinfagnani WDYT?

[justinfagnani]

@web-padawan finalize() still exists on UpdatingElement, so unless you're doing a hasOwnProperty check on LitElement, this should be fine.

[web-padawan]

@justinfagnani thanks for pointing out.

FWIW, we currently rely on _styles private property being set on finalized.
And we use this ugly hack to inject styles from dom-module.

  static _includeStyle(moduleName: string) {
    // Hack to bypass TypeScript private property check
    // eslint-disable-next-line dot-notation
    this['_styles'].push(unsafeCSS(cssFromModule(moduleName)));
  }

So I will have to adjust that to use initialize() instead and add own flag to only do it once.

But then again, we can't modify _styles anymore in a way that we are doing it 😕

Can you consider the following changes in scope of this PR?

1. A point where we could inject our own styles:

• make _initializeStyles method protected
• make _getUniqueStyles method protected

Either option should work for our case.

2. Optional: make _styles property protected (or expose API for one time modification)

[justinfagnani]

@web-padawan this is the code in question, yeah? https://github.com/vaadin/component-mixins/blob/f0e0f1953a2cd2d937d91ca7311e34cf784157f4/packages/themable-element/themable-element.ts#L31

Taking a look now....

[dfreedm]

Also, @aomarks do you know why the Tachometer tests are stuck?

[aomarks]

Also, @aomarks do you know why the Tachometer tests are stuck?

{ SessionNotCreatedError: session not created: This version of ChromeDriver only supports Chrome version 77
    at Object.throwDecodedError (/home/travis/build/Polymer/lit-element/node_modules/selenium-webdriver/lib/error.js:550:15)
    at parseHttpResponse (/home/travis/build/Polymer/lit-element/node_modules/selenium-webdriver/lib/http.js:563:13)
    at Executor.execute (/home/travis/build/Polymer/lit-element/node_modules/selenium-webdriver/lib/http.js:489:26)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  name: 'SessionNotCreatedError',
  remoteStacktrace: '#0 0x55a27cdc9959 <unknown>\n' }
``

https://travis-ci.org/Polymer/lit-element/jobs/627497662

Looks like we need to bump the package-lock to get a new Chromedriver. I can send a PR.

[aomarks]

Also, @aomarks do you know why the Tachometer tests are stuck?

Should be fixed in #868

[dfreedm]

Rebased with #868

[dfreedm]

Apologies for the delay, dropped the ball on this after the Holiday break.

[justinfagnani]

Still LGTM!

@web-padawan hows this look to you? You'd override getStyles().

[web-padawan]

LGTM.

[web-padawan]

Do you think it makes sense to add statis getStyles() mention to "Added"?

[dfreedm]

Yep, will do!