@vaadin/grid 24.8.0-alpha9 → 25.0.0-alpha2

package/README.md

@@ -49,42 +49,6 @@ import '@vaadin/grid/vaadin-grid-sort-column.js';
 import '@vaadin/grid/vaadin-grid-tree-column.js';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/grid/vaadin-grid.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the components from the `theme/material` folder:
-
-```js
-import '@vaadin/grid/theme/material/vaadin-grid.js';
-import '@vaadin/grid/theme/material/vaadin-grid-filter-column.js';
-import '@vaadin/grid/theme/material/vaadin-grid-selection-column.js';
-import '@vaadin/grid/theme/material/vaadin-grid-sort-column.js';
-import '@vaadin/grid/theme/material/vaadin-grid-tree-column.js';
-```
-
-You can also import the Lumo version of the components explicitly:
-
-```js
-import '@vaadin/grid/theme/lumo/vaadin-grid.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-filter-column.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-selection-column.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-sort-column.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-tree-column.js';
-```
-
-Finally, you can import the un-themed components from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/grid/src/vaadin-grid.js';
-import '@vaadin/grid/src/vaadin-grid-column-group.js';
-import '@vaadin/grid/src/vaadin-grid-filter-column.js';
-import '@vaadin/grid/src/vaadin-grid-selection-column.js';
-import '@vaadin/grid/src/vaadin-grid-sort-column.js';
-import '@vaadin/grid/src/vaadin-grid-tree-column.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -45,26 +45,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/checkbox": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/lit-renderer": "24.8.0-alpha9",
-    "@vaadin/text-field": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-alpha2",
+    "@vaadin/checkbox": "25.0.0-alpha2",
+    "@vaadin/component-base": "25.0.0-alpha2",
+    "@vaadin/lit-renderer": "25.0.0-alpha2",
+    "@vaadin/text-field": "25.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha2",
+    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
 }

package/src/vaadin-grid-column-auto-width-mixin.js

@@ -100,7 +100,7 @@ export const ColumnAutoWidthMixin = (superClass) =>
 
       const columnWidth = Math.max(
         this.__getIntrinsicWidth(col),
-        this.__getDistributedWidth((col.assignedSlot || col).parentElement, col),
+        this.__getDistributedWidth(this.__getParentColumnGroup(col), col),
       );
 
       // We're processing a regular grid-column and not a grid-column-group
@@ -144,7 +144,8 @@ export const ColumnAutoWidthMixin = (superClass) =>
         }
       });
 
-      this.__hasHadRenderedRowsForColumnWidthCalculation ||= this._getRenderedRows().length > 0;
+      this.__hasHadRenderedRowsForColumnWidthCalculation =
+        this.__hasHadRenderedRowsForColumnWidthCalculation || this._getRenderedRows().length > 0;
 
       this.__intrinsicWidthCache = new Map();
       // Cache the viewport rows to avoid unnecessary reflows while measuring the column widths
@@ -152,13 +153,38 @@ export const ColumnAutoWidthMixin = (superClass) =>
       const lvi = this._lastVisibleIndex;
       this.__viewportRowsCache = this._getRenderedRows().filter((row) => row.index >= fvi && row.index <= lvi);
 
-      // Pre-cache the intrinsic width of each column
+      // Get columns with autoWidth
       const cols = this.__getAutoWidthColumns();
-      this.__calculateAndCacheIntrinsicWidths(cols);
+
+      // Get all ancestor groups of the columns
+      const ancestorColumnGroups = new Set();
+      for (const col of cols) {
+        let parent = this.__getParentColumnGroup(col);
+        while (parent && !ancestorColumnGroups.has(parent)) {
+          ancestorColumnGroups.add(parent);
+          parent = this.__getParentColumnGroup(parent);
+        }
+      }
+
+      // Pre-cache the intrinsic width of each column and ancestor group
+      this.__calculateAndCacheIntrinsicWidths([...cols, ...ancestorColumnGroups]);
 
       cols.forEach((col) => {
         col.width = `${this.__getDistributedWidth(col)}px`;
       });
+
+      // Clear the column-width cache to avoid a memory leak
+      this.__intrinsicWidthCache.clear();
+    }
+
+    /**
+     * Returns the parent column group of the given column.
+     *
+     * @private
+     */
+    __getParentColumnGroup(col) {
+      const parent = (col.assignedSlot || col).parentElement;
+      return parent && parent !== this ? parent : null;
     }
 
     /**
@@ -296,12 +322,17 @@ export const ColumnAutoWidthMixin = (superClass) =>
       const debouncingUpdateFrozenColumn =
         this.__debounceUpdateFrozenColumn && this.__debounceUpdateFrozenColumn.isActive();
 
+      // When using a percentage-based height, the grid's effective height may
+      // be 0 until the resize observer in grid-mixin calculates a min-height.
+      const hasHeight = this.clientHeight > 0;
+
       return (
         !this._dataProviderController.isLoading() &&
         !hasRowsWithUndefinedIndex &&
         !isElementHidden(this) &&
         !debouncingHiddenChanged &&
-        !debouncingUpdateFrozenColumn
+        !debouncingUpdateFrozenColumn &&
+        hasHeight
       );
     }
   };

package/src/vaadin-grid-column-group.js

@@ -3,9 +3,9 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { GridColumnGroupMixin } from './vaadin-grid-column-group-mixin.js';
 export * from './vaadin-grid-column-group-mixin.js';
 
@@ -42,7 +42,7 @@ export * from './vaadin-grid-column-group-mixin.js';
  * @extends HTMLElement
  * @mixes GridColumnGroupMixin
  */
-class GridColumnGroup extends GridColumnGroupMixin(PolymerElement) {
+class GridColumnGroup extends GridColumnGroupMixin(PolylitMixin(LitElement)) {
   static get is() {
     return 'vaadin-grid-column-group';
   }

package/src/vaadin-grid-column-mixin.js

@@ -7,7 +7,6 @@ import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { get } from '@vaadin/component-base/src/path-utils.js';
-import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { updateCellState } from './vaadin-grid-helpers.js';
 
 /**
@@ -354,13 +353,6 @@ export const ColumnBaseMixin = (superClass) =>
       this._gridValue = undefined;
     }
 
-    /** @protected */
-    ready() {
-      super.ready();
-
-      processTemplates(this);
-    }
-
     /**
      * @return {!Grid | undefined}
      * @protected

package/src/vaadin-grid-column.js

@@ -3,8 +3,9 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { GridColumnMixin } from './vaadin-grid-column-mixin.js';
 
 /**
@@ -18,7 +19,7 @@ import { GridColumnMixin } from './vaadin-grid-column-mixin.js';
  * @extends HTMLElement
  * @mixes GridColumnMixin
  */
-class GridColumn extends GridColumnMixin(PolymerElement) {
+class GridColumn extends GridColumnMixin(PolylitMixin(LitElement)) {
   static get is() {
     return 'vaadin-grid-column';
   }

package/src/vaadin-grid-data-provider-mixin.js

@@ -483,6 +483,10 @@ export const DataProviderMixin = (superClass) =>
      * @param indexes {...number} Row indexes to scroll to
      */
     scrollToIndex(...indexes) {
+      if (!this.__virtualizer || !this.clientHeight || !this._columnTree) {
+        this.__pendingScrollToIndexes = indexes;
+        return;
+      }
       // Synchronous data provider may cause changes to the cache on scroll without
       // ending up in a loading state. Try scrolling to the index until the target
       // index stabilizes.
@@ -491,7 +495,7 @@ export const DataProviderMixin = (superClass) =>
         this._scrollToFlatIndex(targetIndex);
       }
 
-      if (this._dataProviderController.isLoading() || !this.clientHeight || !this._columnTree) {
+      if (this._dataProviderController.isLoading()) {
         this.__pendingScrollToIndexes = indexes;
       }
     }

package/src/vaadin-grid-filter-column.d.ts

@@ -15,7 +15,7 @@ export * from './vaadin-grid-filter-column-mixin.js';
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-grid-filter-column path="name.first"></vaadin-grid-filter-column>
  *
  *  <vaadin-grid-column>

package/src/vaadin-grid-filter-column.js

@@ -14,7 +14,7 @@ import { GridFilterColumnMixin } from './vaadin-grid-filter-column-mixin.js';
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-grid-filter-column path="name.first"></vaadin-grid-filter-column>
  *
  *  <vaadin-grid-column>

package/src/vaadin-grid-filter-element-mixin.d.ts

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 
 /**
  * Fired when the `value` property changes.
@@ -19,7 +18,7 @@ export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCusto
 
 export declare function GridFilterElementMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ControllerMixinClass> & Constructor<GridFilterElementMixinClass> & T;
+): Constructor<GridFilterElementMixinClass> & T;
 
 declare class GridFilterElementMixinClass {
   /**

package/src/vaadin-grid-filter-element-mixin.js

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { timeOut } from '@vaadin/component-base/src/async.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin';
@@ -27,11 +26,9 @@ registerStyles(
 
 /**
  * @polymerMixin
- *
- * @mixes ControllerMixin
  */
 export const GridFilterElementMixin = (superClass) =>
-  class extends ControllerMixin(superClass) {
+  class extends superClass {
     static get properties() {
       return {
         /**

package/src/vaadin-grid-filter.js

@@ -4,8 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/text-field/src/vaadin-text-field.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
 
@@ -38,14 +39,15 @@ import { GridFilterElementMixin } from './vaadin-grid-filter-element-mixin.js';
  * @extends HTMLElement
  * @mixes GridFilterElementMixin
  */
-class GridFilter extends GridFilterElementMixin(ThemableMixin(PolymerElement)) {
-  static get template() {
-    return html`<slot></slot>`;
-  }
-
+class GridFilter extends GridFilterElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-grid-filter';
   }
+
+  /** @protected */
+  render() {
+    return html`<slot></slot>`;
+  }
 }
 
 defineCustomElement(GridFilter);

package/src/vaadin-grid-helpers.js

@@ -215,7 +215,7 @@ export class ColumnObserver {
   __onMutation() {
     // Detect if this is the initial call
     const initialCall = !this.__currentColumns;
-    this.__currentColumns ||= [];
+    this.__currentColumns = this.__currentColumns || [];
 
     // Detect added and removed columns or if the columns order has changed
     const columns = ColumnObserver.getColumns(this.__host);

package/src/vaadin-grid-mixin.js

@@ -17,7 +17,6 @@ import {
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { getClosestElement } from '@vaadin/component-base/src/dom-utils.js';
 import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
-import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
 import { A11yMixin } from './vaadin-grid-a11y-mixin.js';
@@ -282,8 +281,6 @@ export const GridMixin = (superClass) =>
       minHeightObserver.observe(this.$.items);
       minHeightObserver.observe(this.$.footer);
 
-      processTemplates(this);
-
       this._tooltipController = new TooltipController(this);
       this.addController(this._tooltipController);
       this._tooltipController.setManual(true);

package/src/vaadin-grid-selection-column.d.ts

@@ -19,7 +19,7 @@ export * from './vaadin-grid-selection-column-mixin.js';
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>
  *
  *  <vaadin-grid-column>

package/src/vaadin-grid-selection-column.js

@@ -14,7 +14,7 @@ import { GridSelectionColumnMixin } from './vaadin-grid-selection-column-mixin.j
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>
  *
  *  <vaadin-grid-column>

package/src/vaadin-grid-sort-column.d.ts

@@ -15,7 +15,7 @@ export * from './vaadin-grid-sort-column-mixin.js';
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-grid-sort-column path="name.first" direction="asc"></vaadin-grid-sort-column>
  *
  *  <vaadin-grid-column>

package/src/vaadin-grid-sort-column.js

@@ -14,7 +14,7 @@ import { GridSortColumnMixin } from './vaadin-grid-sort-column-mixin.js';
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-grid-sort-column path="name.first" direction="asc"></vaadin-grid-sort-column>
  *
  *  <vaadin-grid-column>

package/src/vaadin-grid-sorter.js

@@ -3,10 +3,11 @@
  * Copyright (c) 2016 - 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 { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { 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';
 import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
 
 /**
@@ -54,21 +55,22 @@ import { GridSorterMixin } from './vaadin-grid-sorter-mixin.js';
  * @mixes ThemableMixin
  * @mixes DirMixin
  */
-class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolymerElement))) {
-  static get template() {
+class GridSorter extends GridSorterMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-grid-sorter';
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div part="content">
         <slot></slot>
       </div>
       <div part="indicators">
-        <span part="order">[[_getDisplayOrder(_order)]]</span>
+        <span part="order">${this._getDisplayOrder(this._order)}</span>
       </div>
     `;
   }
-
-  static get is() {
-    return 'vaadin-grid-sorter';
-  }
 }
 
 defineCustomElement(GridSorter);

package/src/vaadin-grid-tree-column.d.ts

@@ -13,14 +13,13 @@ import type { GridTreeColumnMixinClass } from './vaadin-grid-tree-column-mixin.j
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-grid-tree-column path="name.first"></vaadin-grid-tree-column>
  *
  *  <vaadin-grid-column>
  *    ...
  * ```
  */
-
 declare class GridTreeColumn<TItem = GridDefaultItem> extends HTMLElement {}
 
 interface GridTreeColumn<TItem = GridDefaultItem>

package/src/vaadin-grid-tree-column.js

@@ -14,7 +14,7 @@ import { GridTreeColumnMixin } from './vaadin-grid-tree-column-mixin.js';
  *
  * #### Example:
  * ```html
- * <vaadin-grid items="[[items]]">
+ * <vaadin-grid>
  *  <vaadin-grid-tree-column path="name.first"></vaadin-grid-tree-column>
  *
  *  <vaadin-grid-column>

package/src/vaadin-grid-tree-toggle.js

@@ -3,9 +3,10 @@
  * Copyright (c) 2016 - 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 { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
 
@@ -63,12 +64,13 @@ import { GridTreeToggleMixin } from './vaadin-grid-tree-toggle-mixin.js';
  * @mixes DirMixin
  * @mixes GridTreeToggleMixin
  */
-class GridTreeToggle extends GridTreeToggleMixin(ThemableMixin(DirMixin(PolymerElement))) {
+class GridTreeToggle extends GridTreeToggleMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-grid-tree-toggle';
   }
 
-  static get template() {
+  /** @protected */
+  render() {
     return html`
       <span id="level-spacer"></span>
       <span part="toggle"></span>

package/src/vaadin-grid.d.ts

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
-import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
@@ -277,7 +276,6 @@ interface Grid<TItem = GridDefaultItem>
     ElementMixinClass,
     ThemableMixinClass,
     ThemePropertyMixinClass,
-    ControllerMixinClass,
     GridMixinClass<TItem> {}
 
 declare global {

package/src/vaadin-grid.js

@@ -4,16 +4,15 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-grid-column.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 { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-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 { GridMixin } from './vaadin-grid-mixin.js';
 import { gridStyles } from './vaadin-grid-styles.js';
 
-registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
-
 /**
  * `<vaadin-grid>` is a free, high quality data grid / data table Web Component. The content of the
  * the grid can be populated by using renderer callback function.
@@ -261,20 +260,34 @@ registerStyles('vaadin-grid', gridStyles, { moduleId: 'vaadin-grid-styles' });
  * @extends HTMLElement
  * @mixes GridMixin
  * @mixes ThemableMixin
- * @mixes ControllerMixin
  */
-class Grid extends GridMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
-  static get template() {
+class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-grid';
+  }
+
+  static get styles() {
+    return gridStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div
         id="scroller"
-        safari$="[[_safari]]"
-        ios$="[[_ios]]"
-        loading$="[[loading]]"
-        column-reordering-allowed$="[[columnReorderingAllowed]]"
-        empty-state$="[[__emptyState]]"
+        ?safari="${this._safari}"
+        ?ios="${this._ios}"
+        ?loading="${this.loading}"
+        ?column-reordering-allowed="${this.columnReorderingAllowed}"
+        ?empty-state="${this.__emptyState}"
       >
-        <table id="table" role="treegrid" aria-multiselectable="true" tabindex="0" aria-label$="[[accessibleName]]">
+        <table
+          id="table"
+          role="treegrid"
+          aria-multiselectable="true"
+          tabindex="0"
+          aria-label="${ifDefined(this.accessibleName)}"
+        >
           <caption id="sizer" part="row"></caption>
           <thead id="header" role="rowgroup"></thead>
           <tbody id="items" role="rowgroup"></tbody>
@@ -296,10 +309,6 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerE
       <div id="focusexit" tabindex="0"></div>
     `;
   }
-
-  static get is() {
-    return 'vaadin-grid';
-  }
 }
 
 defineCustomElement(Grid);