Fix inherit from constructor chain

lit · Jan 22, 2019 · 98a031e · 98a031e
1 parent 4ffa707
commit 98a031e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/lit-element.ts b/src/lit-element.ts
@@ -73,8 +73,8 @@ export class LitElement extends UpdatingElement {
   private static get _uniqueStyles(): CSSResult[] {
     if (!this.hasOwnProperty(JSCompiler_renameProperty('_styles', this))) {
       // Inherit styles from superclass if none have been set.
-      if (!this.hasOwnProperty(JSCompiler_renameProperty('styles', this))) {
-        this._styles = this._styles !== undefined ? this._styles : [];
+      if (!this[JSCompiler_renameProperty('styles', this)]) {
+        this._styles = [];
       } else {
         // Take care not to call `this.styles` multiple times since this generates
         // new CSSResults each time.

diff --git a/src/test/lit-element_styling_test.ts b/src/test/lit-element_styling_test.ts
@@ -690,6 +690,30 @@ suite('Static get styles', () => {
     assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(),
                  '4px');
   });
+
+  test('inherits `styles` from constructor chain', async () => {
+    const base = generateElementName();
+    customElements.define(base, class extends LitElement {
+      static get styles() { return css`div {
+          border: 2px solid blue;
+        }`;
+      }
+
+      render() {
+        return htmlWithStyles`
+        <div>Testing1</div>`;
+      }
+    });
+
+    const sub = generateElementName();
+    customElements.define(sub, class extends customElements.get(base) {});
+
+    const el = document.createElement(sub);
+    container.appendChild(el);
+    await (el as LitElement).updateComplete;
+    const div = el.shadowRoot!.querySelector('div');
+    assert.equal(getComputedStyleValue(div!, 'border-top-width').trim(), '2px');
+  });
 });
 
 suite('ShadyDOM', () => {