diff --git a/src/lit-element.ts b/src/lit-element.ts index fe20bdc2..ca13a561 100644 --- 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 index 893a4295..ce70b733 100644 --- 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` +
Testing1
`; + } + }); + + 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', () => {