diff --git a/packages/accordion/src/vaadin-accordion-panel-mixin.js b/packages/accordion/src/vaadin-accordion-panel-mixin.js index 7868e2fc3c..7e026c7491 100644 --- a/packages/accordion/src/vaadin-accordion-panel-mixin.js +++ b/packages/accordion/src/vaadin-accordion-panel-mixin.js @@ -36,12 +36,8 @@ export const AccordionPanelMixin = (superClass) => return ['__updateAriaAttributes(focusElement, _contentElements)']; } - static get delegateAttrs() { - return ['theme']; - } - static get delegateProps() { - return ['disabled', 'opened']; + return ['disabled', 'opened', '_theme']; } constructor() { @@ -69,6 +65,25 @@ export const AccordionPanelMixin = (superClass) => this.addController(this._tooltipController); } + /** + * Override method from `DelegateStateMixin` to set delegate `theme` + * using attribute instead of property (needed for the Lit version). + * @protected + * @override + */ + _delegateProperty(name, value) { + if (!this.stateTarget) { + return; + } + + if (name === '_theme') { + this._delegateAttribute('theme', value); + return; + } + + super._delegateProperty(name, value); + } + /** * Override method inherited from `DisabledMixin` * to not set `aria-disabled` on the host element. diff --git a/packages/accordion/test/accordion-panel.common.js b/packages/accordion/test/accordion-panel.common.js index 65da8ec83b..45bf083586 100644 --- a/packages/accordion/test/accordion-panel.common.js +++ b/packages/accordion/test/accordion-panel.common.js @@ -148,6 +148,16 @@ describe('vaadin-accordion-panel', () => { await nextUpdate(panel); expect(heading.hasAttribute('disabled')).to.be.false; }); + + it(`should propagate theme attribute to ${type} heading`, async () => { + panel.setAttribute('theme', 'filled'); + await nextUpdate(panel); + expect(heading.getAttribute('theme')).to.equal('filled'); + + panel.removeAttribute('theme'); + await nextUpdate(panel); + expect(heading.hasAttribute('theme')).to.be.false; + }); }); });