refactor!: update all components to be based on LitElement (#9218)

Author: web-padawan

packages/accordion/src/vaadin-accordion-heading.js

@@ -3,15 +3,14 @@
  * Copyright (c) 2019 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { accordionHeading } from './vaadin-accordion-heading-core-styles.js';
 
-registerStyles('vaadin-accordion-heading', accordionHeading, { moduleId: 'vaadin-accordion-heading-styles' });
-
 /**
  * The accordion heading element.
  *
@@ -51,18 +50,17 @@ registerStyles('vaadin-accordion-heading', accordionHeading, { moduleId: 'vaadin
  * @mixes DirMixin
  * @mixes ThemableMixin
  */
-class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-accordion-heading';
   }
 
-  static get template() {
-    return html`
-      <button id="button" part="content" disabled$="[[disabled]]" aria-expanded$="[[__updateAriaExpanded(opened)]]">
-        <span part="toggle" aria-hidden="true"></span>
-        <slot></slot>
-      </button>
-    `;
+  static get shadowRootOptions() {
+    return { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  }
+
+  static get styles() {
+    return accordionHeading;
   }
 
   static get properties() {
@@ -73,21 +71,20 @@ class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement
       opened: {
         type: Boolean,
         reflectToAttribute: true,
+        sync: true,
         value: false,
       },
     };
   }
 
-  /**
-   * @param {DocumentFragment} dom
-   * @return {null}
-   * @protected
-   * @override
-   */
-  _attachDom(dom) {
-    const root = this.attachShadow({ mode: 'open', delegatesFocus: true });
-    root.appendChild(dom);
-    return root;
+  /** @protected */
+  render() {
+    return html`
+      <button id="button" part="content" ?disabled="${this.disabled}" aria-expanded="${this.opened ? 'true' : 'false'}">
+        <span part="toggle" aria-hidden="true"></span>
+        <slot></slot>
+      </button>
+    `;
   }
 
   /** @protected */
@@ -100,11 +97,6 @@ class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement
       this.setAttribute('role', 'heading');
     }
   }
-
-  /** @private */
-  __updateAriaExpanded(opened) {
-    return opened ? 'true' : 'false';
-  }
 }
 
 defineCustomElement(AccordionHeading);

packages/accordion/src/vaadin-accordion-panel.js

@@ -4,15 +4,13 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-accordion-heading.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { accordionPanel } from './vaadin-accordion-panel-core-styles.js';
 import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
 
-registerStyles('vaadin-accordion-panel', accordionPanel, { moduleId: 'vaadin-accordion-panel-styles' });
-
 /**
  * The accordion panel element.
  *
@@ -40,15 +38,19 @@ registerStyles('vaadin-accordion-panel', accordionPanel, { moduleId: 'vaadin-acc
  * @customElement
  * @extends HTMLElement
  * @mixes AccordionPanelMixin
- * @mixes ControllerMixin
  * @mixes ThemableMixin
  */
-class AccordionPanel extends AccordionPanelMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
+class AccordionPanel extends AccordionPanelMixin(ThemableMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-accordion-panel';
   }
 
-  static get template() {
+  static get styles() {
+    return accordionPanel;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <slot name="summary"></slot>
 

packages/accordion/src/vaadin-accordion.js

@@ -4,9 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-accordion-panel.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { AccordionMixin } from './vaadin-accordion-mixin.js';
 
@@ -60,24 +61,26 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Accordion extends AccordionMixin(ThemableMixin(ElementMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
+class Accordion extends AccordionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-accordion';
+  }
 
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
-      <slot></slot>
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
     `;
   }
 
-  static get is() {
-    return 'vaadin-accordion';
+  /** @protected */
+  render() {
+    return html`<slot></slot>`;
   }
 }
 

packages/accordion/src/vaadin-lit-accordion-heading.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync } from '@vaadin/testing-helpers';
+import { fixtureSync, nextUpdate } from '@vaadin/testing-helpers';
 import '../../vaadin-accordion-panel.js';
 import { resetUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 
@@ -23,6 +23,7 @@ describe('vaadin-accordion-panel', () => {
 
     it('opened', async () => {
       panel.opened = true;
+      await nextUpdate(panel);
       await expect(panel).dom.to.equalSnapshot();
     });
 
@@ -33,6 +34,7 @@ describe('vaadin-accordion-panel', () => {
 
     it('theme', async () => {
       panel.setAttribute('theme', 'filled');
+      await nextUpdate(panel);
       await expect(panel).dom.to.equalSnapshot();
     });
   });