diff --git a/packages/grid/src/styles/vaadin-grid-base-styles.js b/packages/grid/src/styles/vaadin-grid-base-styles.js
index cac3caeb8a..84014ed900 100644
--- a/packages/grid/src/styles/vaadin-grid-base-styles.js
+++ b/packages/grid/src/styles/vaadin-grid-base-styles.js
@@ -121,13 +121,13 @@ export const gridStyles = css`
   }
 
   #header th,
-  [part~='reorder-ghost'] {
+  .reorder-ghost {
     font-size: var(--vaadin-grid-header-font-size, 1em);
     font-weight: var(--vaadin-grid-header-font-weight, 500);
     color: var(--vaadin-grid-header-text-color, var(--vaadin-text-color));
   }
 
-  [part~='row'] {
+  .row {
     display: flex;
     width: 100%;
     box-sizing: border-box;
@@ -135,28 +135,28 @@ export const gridStyles = css`
     position: relative;
   }
 
-  [part~='row']:not(:focus-within) {
+  .row:not(:focus-within) {
     --_non-focused-row-none: none;
   }
 
-  [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
+  .row[loading] .body-cell ::slotted(vaadin-grid-cell-content) {
     visibility: hidden;
   }
 
-  [column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
+  [column-rendering='lazy'] .body-cell:not([frozen]):not([frozen-to-end]) {
     transform: translateX(var(--_grid-lazy-columns-start));
   }
 
-  #items [part~='row']:empty {
+  #items .row:empty {
     height: 100%;
   }
 
-  [part~='cell'] {
+  .cell {
     padding: 0;
     box-sizing: border-box;
   }
 
-  [part~='cell']:where(:not([part~='details-cell'])) {
+  .cell:where(:not(.details-cell)) {
     flex-shrink: 0;
     flex-grow: 1;
     display: flex;
@@ -173,29 +173,29 @@ export const gridStyles = css`
     ::before - header bottom and footer top borders that only appear when scrolling
   */
 
-  [part~='row']::after {
+  .row::after {
     top: 0;
     bottom: calc(var(--_row-border-width) * -1);
   }
 
-  [part~='body-row'] {
+  .body-row {
     scroll-margin-bottom: var(--_row-border-width);
   }
 
-  [part~='cell'] {
+  .cell {
     border-block: var(--_row-border-width) var(--_border-color);
     border-top-style: solid;
   }
 
-  [part~='cell']::after {
+  .cell::after {
     top: calc(var(--_row-border-width) * -1);
     bottom: calc(var(--_row-border-width) * -1);
   }
 
   /* Block borders / Last header row and first footer row */
 
-  [part~='last-header-row']::before,
-  [part~='first-footer-row']::before {
+  .last-header-row::before,
+  .first-footer-row::before {
     position: absolute;
     inset-inline: 0;
     border-block: var(--_row-border-width) var(--_border-color);
@@ -204,17 +204,17 @@ export const gridStyles = css`
 
   /* Block borders / First header row */
 
-  [part~='first-header-row-cell'] {
+  .first-header-row-cell {
     border-top-style: none;
   }
 
-  [part~='first-header-row-cell']::after {
+  .first-header-row-cell::after {
     top: 0;
   }
 
   /* Block borders / Last header row */
 
-  :host([overflow~='top']) [part~='last-header-row']::before {
+  :host([overflow~='top']) .last-header-row::before {
     content: '';
     bottom: calc(var(--_row-border-width) * -1);
     border-bottom-style: solid;
@@ -222,22 +222,22 @@ export const gridStyles = css`
 
   /* Block borders / First body row */
 
-  #table:not([has-header]) [part~='first-row-cell'] {
+  #table:not([has-header]) .first-row-cell {
     border-top-style: none;
   }
 
-  #table:not([has-header]) [part~='first-row-cell']::after {
+  #table:not([has-header]) .first-row-cell::after {
     top: 0;
   }
 
   /* Block borders / Last body row */
 
-  [part~='last-row']::after {
+  .last-row::after {
     bottom: 0;
   }
 
-  [part~='last-row'] [part~='details-cell'],
-  [part~='last-row-cell']:not([part~='details-opened-row-cell']) {
+  .last-row .details-cell,
+  .last-row-cell:not(.details-opened-row-cell) {
     border-bottom-style: solid;
   }
 
@@ -246,8 +246,8 @@ export const gridStyles = css`
   :host([all-rows-visible]),
   :host([overflow~='top']),
   :host([overflow~='bottom']) {
-    #table:not([has-footer]) [part~='last-row'] [part~='details-cell'],
-    #table:not([has-footer]) [part~='last-row-cell']:not([part~='details-opened-row-cell']) {
+    #table:not([has-footer]) .last-row .details-cell,
+    #table:not([has-footer]) .last-row-cell:not(.details-opened-row-cell) {
       border-bottom-style: none;
 
       &::after {
@@ -258,17 +258,17 @@ export const gridStyles = css`
 
   /* Block borders / First footer row */
 
-  [part~='first-footer-row']::after {
+  .first-footer-row::after {
     top: calc(var(--_row-border-width) * -1);
   }
 
-  [part~='first-footer-row-cell'] {
+  .first-footer-row-cell {
     border-top-style: none;
   }
 
   :host([overflow~='bottom']),
   :host(:not([overflow~='top']):not([all-rows-visible])) #scroller:not([empty-state]) {
-    [part~='first-footer-row']::before {
+    .first-footer-row::before {
       content: '';
       top: calc(var(--_row-border-width) * -1);
       border-top-style: solid;
@@ -277,38 +277,38 @@ export const gridStyles = css`
 
   /* Block borders / Last footer row */
 
-  [part~='last-footer-row']::after,
-  [part~='last-footer-row-cell']::after {
+  .last-footer-row::after,
+  .last-footer-row-cell::after {
     bottom: 0;
   }
 
   /* Inline borders */
 
-  [part~='cell'] {
+  .cell {
     border-inline: var(--_column-border-width) var(--_border-color);
   }
 
-  [part~='header-cell']:not([part~='first-column-cell']),
-  [part~='footer-cell']:not([part~='first-column-cell']),
-  [part~='body-cell']:not([part~='first-column-cell']) {
+  .header-cell:not(.first-column-cell),
+  .footer-cell:not(.first-column-cell),
+  .body-cell:not(.first-column-cell) {
     border-inline-start-style: solid;
   }
 
-  [part~='last-frozen-cell']:not([part~='last-column-cell']) {
+  .last-frozen-cell:not(.last-column-cell) {
     border-inline-end-style: solid;
 
-    & + [part~='cell'] {
+    & + .cell {
       border-inline-start-style: none;
     }
   }
 
   /* Row and cell background */
 
-  [part~='row'] {
+  .row {
     background-color: var(--vaadin-grid-row-background-color, var(--vaadin-background-color));
   }
 
-  [part~='cell'] {
+  .cell {
     --_cell-background-image: linear-gradient(
       var(--vaadin-grid-cell-background-color, transparent),
       var(--vaadin-grid-cell-background-color, transparent)
@@ -320,7 +320,7 @@ export const gridStyles = css`
     background-image: var(--_cell-background-image);
   }
 
-  [part~='body-cell'] {
+  .body-cell {
     --_cell-highlight-background-image: linear-gradient(
       var(--vaadin-grid-row-highlight-background-color, transparent),
       var(--vaadin-grid-row-highlight-background-color, transparent)
@@ -332,7 +332,7 @@ export const gridStyles = css`
       var(--_cell-background-image, none);
   }
 
-  [part~='body-row'][selected] {
+  .body-row[selected] {
     --_row-selected-background-color: var(
       --vaadin-grid-row-selected-background-color,
       color-mix(in srgb, currentColor 8%, transparent)
@@ -344,7 +344,7 @@ export const gridStyles = css`
   }
 
   @media (any-hover: hover) {
-    [part~='body-row']:hover {
+    .body-row:hover {
       --_row-hover-background-color: var(--vaadin-grid-row-hover-background-color, transparent);
       --_row-hover-background-image: linear-gradient(
         var(--_row-hover-background-color),
@@ -363,27 +363,27 @@ export const gridStyles = css`
 
   /* Variant: wrap cell contents */
 
-  :host([theme~='wrap-cell-content']) [part~='cell']:not([part~='details-cell']) {
+  :host([theme~='wrap-cell-content']) .cell:not(.details-cell) {
     white-space: normal;
   }
 
   /* Raise highlighted rows above others */
-  [part~='row'],
-  [part~='frozen-cell'],
-  [part~='frozen-to-end-cell'] {
+  .row,
+  .frozen-cell,
+  .frozen-to-end-cell {
     &:focus,
     &:focus-within {
       z-index: 3;
     }
   }
 
-  [part~='details-cell'] {
+  .details-cell {
     position: absolute;
     bottom: 0;
     width: 100%;
   }
 
-  [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  .cell ::slotted(vaadin-grid-cell-content) {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -441,13 +441,13 @@ export const gridStyles = css`
   }
 
   /* Reordering styles */
-  :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
-  :host([reordering]) [part~='resize-handle'],
-  #scroller[no-content-pointer-events] [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  :host([reordering]) .cell ::slotted(vaadin-grid-cell-content),
+  :host([reordering]) .resize-handle,
+  #scroller[no-content-pointer-events] .cell ::slotted(vaadin-grid-cell-content) {
     pointer-events: none;
   }
 
-  [part~='reorder-ghost'] {
+  .reorder-ghost {
     visibility: hidden;
     position: fixed;
     pointer-events: none;
@@ -467,12 +467,12 @@ export const gridStyles = css`
     user-select: none;
   }
 
-  :host([reordering]) [part~='cell'] {
+  :host([reordering]) .cell {
     /* TODO expose a custom property to control this */
     --_reorder-curtain-filter: brightness(0.9) contrast(1.1);
   }
 
-  :host([reordering]) [part~='cell']::after {
+  :host([reordering]) .cell::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -482,17 +482,17 @@ export const gridStyles = css`
     outline: 0;
   }
 
-  :host([reordering]) [part~='cell'][reorder-status='allowed'] {
+  :host([reordering]) .cell[reorder-status='allowed'] {
     /* TODO expose a custom property to control this */
     --_reorder-curtain-filter: brightness(0.94) contrast(1.07);
   }
 
-  :host([reordering]) [part~='cell'][reorder-status='dragging'] {
+  :host([reordering]) .cell[reorder-status='dragging'] {
     --_reorder-curtain-filter: none;
   }
 
   /* Resizing styles */
-  [part~='resize-handle'] {
+  .resize-handle {
     position: absolute;
     top: 0;
     inset-inline-end: 0;
@@ -506,17 +506,17 @@ export const gridStyles = css`
     translate: var(--_column-border-width);
   }
 
-  [part~='last-column-cell'] [part~='resize-handle'] {
+  .last-column-cell .resize-handle {
     translate: 0;
   }
 
-  :host(:not([reordering])) *:not([column-resizing]) [part='resize-handle']:hover,
-  [part='resize-handle']:active {
+  :host(:not([reordering])) *:not([column-resizing]) .resize-handle:hover,
+  .resize-handle:active {
     opacity: 1;
     transition-delay: 0.15s;
   }
 
-  [part~='resize-handle']::before {
+  .resize-handle::before {
     position: absolute;
     content: '';
     height: 100%;
@@ -524,25 +524,25 @@ export const gridStyles = css`
     translate: calc(-50% + var(--vaadin-focus-ring-width) / 2);
   }
 
-  :host([dir='rtl']) [part~='resize-handle']::before {
+  :host([dir='rtl']) .resize-handle::before {
     translate: calc(50% - var(--vaadin-focus-ring-width) / 2);
   }
 
-  [first-frozen-to-end] [part~='resize-handle']::before,
-  :is([last-column], [last-frozen]) [part~='resize-handle']::before {
+  [first-frozen-to-end] .resize-handle::before,
+  :is([last-column], [last-frozen]) .resize-handle::before {
     width: 8px;
     translate: 0;
   }
 
-  :is([last-column], [last-frozen]) [part~='resize-handle']::before {
+  :is([last-column], [last-frozen]) .resize-handle::before {
     inset-inline-end: 0;
   }
 
-  [frozen-to-end] :is([part~='resize-handle'], [part~='resize-handle']::before) {
+  [frozen-to-end] :is(.resize-handle, .resize-handle::before) {
     inset-inline: 0 auto;
   }
 
-  [frozen-to-end] [part~='resize-handle'] {
+  [frozen-to-end] .resize-handle {
     translate: calc(var(--_column-border-width) * -1);
   }
 
@@ -556,7 +556,7 @@ export const gridStyles = css`
   }
 
   /* Focus outline element, also used for d'n'd indication */
-  :is([part~='row'], [part~='cell'])::after {
+  :is(.row, .cell)::after {
     position: absolute;
     z-index: 3;
     inset-inline: 0;
@@ -565,36 +565,36 @@ export const gridStyles = css`
     outline-offset: calc(var(--vaadin-focus-ring-width) * -1);
   }
 
-  [part~='row']::after {
+  .row::after {
     transform: translateX(var(--_grid-horizontal-scroll-position));
   }
 
-  [part~='cell']:where(:not([part~='details-cell']))::after {
+  .cell:where(:not(.details-cell))::after {
     inset-inline: calc(var(--_column-border-width) * -1);
   }
 
-  [part~='first-column-cell']::after {
+  .first-column-cell::after {
     inset-inline-start: 0;
   }
 
-  [part~='last-column-cell']::after {
+  .last-column-cell::after {
     inset-inline-end: 0;
   }
 
-  :host([navigating]) [part~='row']:focus,
-  :host([navigating]) [part~='cell']:focus {
+  :host([navigating]) .row:focus,
+  :host([navigating]) .cell:focus {
     outline: 0;
   }
 
-  [part~='row']:focus-visible,
-  [part~='cell']:focus-visible {
+  .row:focus-visible,
+  .cell:focus-visible {
     outline: 0;
   }
 
-  [part~='row']:focus-visible::after,
-  [part~='cell']:focus-visible::after,
-  :host([navigating]) [part~='row']:focus::after,
-  :host([navigating]) [part~='cell']:focus::after {
+  .row:focus-visible::after,
+  .cell:focus-visible::after,
+  :host([navigating]) .row:focus::after,
+  :host([navigating]) .cell:focus::after {
     content: '';
   }
 
@@ -604,48 +604,48 @@ export const gridStyles = css`
     outline-offset: calc(var(--vaadin-grid-border-width, 1px) * -1);
   }
 
-  [part~='row'][dragover] {
+  .row[dragover] {
     z-index: 100 !important;
   }
 
-  [part~='row'][dragover]::after {
+  .row[dragover]::after {
     content: '';
   }
 
-  [part~='row'][dragover='above']::after {
+  .row[dragover='above']::after {
     outline: 0;
     border-top: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
   }
 
-  [part~='row']:not([part~='first-row'])[dragover='above']::after {
+  .row:not(.first-row)[dragover='above']::after {
     top: calc(var(--vaadin-focus-ring-width) / -2);
   }
 
-  [part~='row'][dragover='below']::after {
+  .row[dragover='below']::after {
     outline: 0;
     border-bottom: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
   }
 
-  [part~='row']:not([part~='last-row'])[dragover='below']::after {
+  .row:not(.last-row)[dragover='below']::after {
     bottom: calc(var(--vaadin-focus-ring-width) / -2);
   }
 
-  [part~='row'][dragstart] [part~='cell'] {
+  .row[dragstart] .cell {
     border-block: none !important;
     padding-block: var(--_row-border-width) !important;
   }
 
-  [part~='row'][dragstart] [part~='cell'][last-column] {
+  .row[dragstart] .cell[last-column] {
     border-radius: 0 3px 3px 0;
   }
 
-  [part~='row'][dragstart] [part~='cell'][first-column] {
+  .row[dragstart] .cell[first-column] {
     border-radius: 3px 0 0 3px;
   }
 
   /* Indicates the number of dragged rows */
   /* TODO export custom properties to control styles */
-  #scroller [part~='row'][dragstart]:not([dragstart=''])::before {
+  #scroller .row[dragstart]:not([dragstart=''])::before {
     position: absolute;
     left: var(--_grid-drag-start-x);
     top: var(--_grid-drag-start-y);
@@ -669,12 +669,12 @@ export const gridStyles = css`
     visibility: hidden;
   }
 
-  #sizer [part~='details-cell'],
-  #sizer [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  #sizer .details-cell,
+  #sizer .cell ::slotted(vaadin-grid-cell-content) {
     display: none !important;
   }
 
-  #sizer [part~='cell'] {
+  #sizer .cell {
     display: block;
     flex-shrink: 0;
     line-height: 0;
@@ -685,7 +685,7 @@ export const gridStyles = css`
     border: none !important;
   }
 
-  #sizer [part~='cell']::before {
+  #sizer .cell::before {
     content: '-';
   }
 `;
diff --git a/packages/grid/src/vaadin-grid-helpers.js b/packages/grid/src/vaadin-grid-helpers.js
index be2f3f8ac0..480ac3fb3f 100644
--- a/packages/grid/src/vaadin-grid-helpers.js
+++ b/packages/grid/src/vaadin-grid-helpers.js
@@ -84,6 +84,7 @@ export function updateState(element, attribute, value) {
  * @param {boolean | string | null | undefined} value
  */
 export function updatePart(element, part, value) {
+  element.classList.toggle(part, value || value === '');
   element.part.toggle(part, value || value === '');
   element.part.length === 0 && element.removeAttribute('part');
 }
diff --git a/packages/grid/src/vaadin-grid.js b/packages/grid/src/vaadin-grid.js
index 17ed5fb680..7443f372cd 100644
--- a/packages/grid/src/vaadin-grid.js
+++ b/packages/grid/src/vaadin-grid.js
@@ -302,7 +302,7 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
           <tbody id="items" role="rowgroup"></tbody>
           <tbody id="emptystatebody">
             <tr id="emptystaterow">
-              <td part="empty-state" id="emptystatecell" tabindex="0">
+              <td part="empty-state" class="empty-state" id="emptystatecell" tabindex="0">
                 <slot name="empty-state" id="emptystateslot"></slot>
               </td>
             </tr>
@@ -310,7 +310,7 @@ class Grid extends GridMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
           <tfoot id="footer" role="rowgroup"></tfoot>
         </table>
 
-        <div part="reorder-ghost"></div>
+        <div part="reorder-ghost" class="reorder-ghost"></div>
       </div>
 
       <slot name="tooltip"></slot>
diff --git a/packages/grid/test/dom/__snapshots__/grid.test.snap.js b/packages/grid/test/dom/__snapshots__/grid.test.snap.js
index bd3c8fc473..fe996ed628 100644
--- a/packages/grid/test/dom/__snapshots__/grid.test.snap.js
+++ b/packages/grid/test/dom/__snapshots__/grid.test.snap.js
@@ -59,6 +59,7 @@ snapshots["vaadin-grid basic shadow default"] =
     <tbody>
       <tr>
         <td
+          class="body-cell cell first-column-cell"
           first-column=""
           id="vaadin-grid-cell-4"
           part="cell body-cell first-column-cell"
@@ -70,6 +71,7 @@ snapshots["vaadin-grid basic shadow default"] =
           </slot>
         </td>
         <td
+          class="body-cell cell last-column-cell"
           id="vaadin-grid-cell-5"
           last-column=""
           part="cell body-cell last-column-cell"
@@ -89,12 +91,14 @@ snapshots["vaadin-grid basic shadow default"] =
     >
       <tr
         aria-rowindex="1"
+        class="first-header-row header-row last-header-row row"
         part="row header-row first-header-row last-header-row"
         role="row"
         style="--_grid-horizontal-scroll-position: 0px;"
         tabindex="-1"
       >
         <th
+          class="cell first-column-cell first-header-row-cell header-cell last-header-row-cell"
           first-column=""
           id="vaadin-grid-cell-0"
           part="cell header-cell first-column-cell first-header-row-cell last-header-row-cell"
@@ -106,6 +110,7 @@ snapshots["vaadin-grid basic shadow default"] =
           </slot>
         </th>
         <th
+          class="cell first-header-row-cell header-cell last-column-cell last-header-row-cell"
           id="vaadin-grid-cell-1"
           last-column=""
           part="cell header-cell last-column-cell first-header-row-cell last-header-row-cell"
@@ -126,6 +131,7 @@ snapshots["vaadin-grid basic shadow default"] =
       <tr
         aria-rowindex="2"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row even-row first-row row"
         drag-disabled=""
         drop-disabled=""
         even=""
@@ -137,6 +143,7 @@ snapshots["vaadin-grid basic shadow default"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-column-cell first-row-cell"
           first-column=""
           id="vaadin-grid-cell-6"
           part="cell body-cell first-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -149,6 +156,7 @@ snapshots["vaadin-grid basic shadow default"] =
         </td>
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-row-cell last-column-cell"
           id="vaadin-grid-cell-7"
           last-column=""
           part="cell body-cell last-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -163,6 +171,7 @@ snapshots["vaadin-grid basic shadow default"] =
       <tr
         aria-rowindex="3"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row last-row odd-row row"
         drag-disabled=""
         drop-disabled=""
         last=""
@@ -174,6 +183,7 @@ snapshots["vaadin-grid basic shadow default"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell first-column-cell last-row-cell odd-row-cell"
           first-column=""
           id="vaadin-grid-cell-8"
           part="cell body-cell first-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -186,6 +196,7 @@ snapshots["vaadin-grid basic shadow default"] =
         </td>
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell last-column-cell last-row-cell odd-row-cell"
           id="vaadin-grid-cell-9"
           last-column=""
           part="cell body-cell last-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -201,6 +212,7 @@ snapshots["vaadin-grid basic shadow default"] =
     <tbody id="emptystatebody">
       <tr id="emptystaterow">
         <td
+          class="empty-state"
           id="emptystatecell"
           part="empty-state"
           tabindex="0"
@@ -220,6 +232,7 @@ snapshots["vaadin-grid basic shadow default"] =
     >
       <tr
         aria-rowindex="4"
+        class="footer-row row"
         hidden=""
         part="row footer-row"
         role="row"
@@ -227,6 +240,7 @@ snapshots["vaadin-grid basic shadow default"] =
         tabindex="-1"
       >
         <td
+          class="cell first-column-cell footer-cell"
           first-column=""
           id="vaadin-grid-cell-2"
           part="cell footer-cell first-column-cell"
@@ -238,6 +252,7 @@ snapshots["vaadin-grid basic shadow default"] =
           </slot>
         </td>
         <td
+          class="cell footer-cell last-column-cell"
           id="vaadin-grid-cell-3"
           last-column=""
           part="cell footer-cell last-column-cell"
@@ -251,7 +266,10 @@ snapshots["vaadin-grid basic shadow default"] =
       </tr>
     </tfoot>
   </table>
-  <div part="reorder-ghost">
+  <div
+    class="reorder-ghost"
+    part="reorder-ghost"
+  >
   </div>
 </div>
 <slot name="tooltip">
@@ -286,6 +304,7 @@ snapshots["vaadin-grid basic shadow selected"] =
     <tbody>
       <tr>
         <td
+          class="body-cell cell first-column-cell"
           first-column=""
           id="vaadin-grid-cell-4"
           part="cell body-cell first-column-cell"
@@ -297,6 +316,7 @@ snapshots["vaadin-grid basic shadow selected"] =
           </slot>
         </td>
         <td
+          class="body-cell cell last-column-cell"
           id="vaadin-grid-cell-5"
           last-column=""
           part="cell body-cell last-column-cell"
@@ -316,12 +336,14 @@ snapshots["vaadin-grid basic shadow selected"] =
     >
       <tr
         aria-rowindex="1"
+        class="first-header-row header-row last-header-row row"
         part="row header-row first-header-row last-header-row"
         role="row"
         style="--_grid-horizontal-scroll-position: 0px;"
         tabindex="-1"
       >
         <th
+          class="cell first-column-cell first-header-row-cell header-cell last-header-row-cell"
           first-column=""
           id="vaadin-grid-cell-0"
           part="cell header-cell first-column-cell first-header-row-cell last-header-row-cell"
@@ -333,6 +355,7 @@ snapshots["vaadin-grid basic shadow selected"] =
           </slot>
         </th>
         <th
+          class="cell first-header-row-cell header-cell last-column-cell last-header-row-cell"
           id="vaadin-grid-cell-1"
           last-column=""
           part="cell header-cell last-column-cell first-header-row-cell last-header-row-cell"
@@ -353,6 +376,7 @@ snapshots["vaadin-grid basic shadow selected"] =
       <tr
         aria-rowindex="2"
         aria-selected="true"
+        class="body-row drag-disabled-row drop-disabled-row even-row first-row row selected-row"
         drag-disabled=""
         drop-disabled=""
         even=""
@@ -365,6 +389,7 @@ snapshots["vaadin-grid basic shadow selected"] =
       >
         <td
           aria-selected="true"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-column-cell first-row-cell selected-row-cell"
           first-column=""
           id="vaadin-grid-cell-6"
           part="cell body-cell first-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell selected-row-cell"
@@ -377,6 +402,7 @@ snapshots["vaadin-grid basic shadow selected"] =
         </td>
         <td
           aria-selected="true"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-row-cell last-column-cell selected-row-cell"
           id="vaadin-grid-cell-7"
           last-column=""
           part="cell body-cell last-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell selected-row-cell"
@@ -391,6 +417,7 @@ snapshots["vaadin-grid basic shadow selected"] =
       <tr
         aria-rowindex="3"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row last-row odd-row row"
         drag-disabled=""
         drop-disabled=""
         last=""
@@ -402,6 +429,7 @@ snapshots["vaadin-grid basic shadow selected"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell first-column-cell last-row-cell odd-row-cell"
           first-column=""
           id="vaadin-grid-cell-8"
           part="cell body-cell first-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -414,6 +442,7 @@ snapshots["vaadin-grid basic shadow selected"] =
         </td>
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell last-column-cell last-row-cell odd-row-cell"
           id="vaadin-grid-cell-9"
           last-column=""
           part="cell body-cell last-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -429,6 +458,7 @@ snapshots["vaadin-grid basic shadow selected"] =
     <tbody id="emptystatebody">
       <tr id="emptystaterow">
         <td
+          class="empty-state"
           id="emptystatecell"
           part="empty-state"
           tabindex="0"
@@ -448,6 +478,7 @@ snapshots["vaadin-grid basic shadow selected"] =
     >
       <tr
         aria-rowindex="4"
+        class="footer-row row"
         hidden=""
         part="row footer-row"
         role="row"
@@ -455,6 +486,7 @@ snapshots["vaadin-grid basic shadow selected"] =
         tabindex="-1"
       >
         <td
+          class="cell first-column-cell footer-cell"
           first-column=""
           id="vaadin-grid-cell-2"
           part="cell footer-cell first-column-cell"
@@ -466,6 +498,7 @@ snapshots["vaadin-grid basic shadow selected"] =
           </slot>
         </td>
         <td
+          class="cell footer-cell last-column-cell"
           id="vaadin-grid-cell-3"
           last-column=""
           part="cell footer-cell last-column-cell"
@@ -479,7 +512,10 @@ snapshots["vaadin-grid basic shadow selected"] =
       </tr>
     </tfoot>
   </table>
-  <div part="reorder-ghost">
+  <div
+    class="reorder-ghost"
+    part="reorder-ghost"
+  >
   </div>
 </div>
 <slot name="tooltip">
@@ -514,6 +550,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
     <tbody>
       <tr>
         <td
+          class="body-cell cell first-column-cell"
           first-column=""
           id="vaadin-grid-cell-4"
           part="cell body-cell first-column-cell"
@@ -525,6 +562,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
           </slot>
         </td>
         <td
+          class="body-cell cell last-column-cell"
           id="vaadin-grid-cell-5"
           last-column=""
           part="cell body-cell last-column-cell"
@@ -544,12 +582,14 @@ snapshots["vaadin-grid basic shadow details opened"] =
     >
       <tr
         aria-rowindex="1"
+        class="first-header-row header-row last-header-row row"
         part="row header-row first-header-row last-header-row"
         role="row"
         style="--_grid-horizontal-scroll-position: 0px;"
         tabindex="-1"
       >
         <th
+          class="cell first-column-cell first-header-row-cell header-cell last-header-row-cell"
           first-column=""
           id="vaadin-grid-cell-0"
           part="cell header-cell first-column-cell first-header-row-cell last-header-row-cell"
@@ -561,6 +601,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
           </slot>
         </th>
         <th
+          class="cell first-header-row-cell header-cell last-column-cell last-header-row-cell"
           id="vaadin-grid-cell-1"
           last-column=""
           part="cell header-cell last-column-cell first-header-row-cell last-header-row-cell"
@@ -581,6 +622,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
       <tr
         aria-rowindex="2"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row even-row first-row row"
         drag-disabled=""
         drop-disabled=""
         even=""
@@ -592,6 +634,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-column-cell first-row-cell"
           first-column=""
           id="vaadin-grid-cell-6"
           part="cell body-cell first-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -604,6 +647,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
         </td>
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-row-cell last-column-cell"
           id="vaadin-grid-cell-7"
           last-column=""
           part="cell body-cell last-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -618,6 +662,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
       <tr
         aria-rowindex="3"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row last-row odd-row row"
         drag-disabled=""
         drop-disabled=""
         last=""
@@ -629,6 +674,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell first-column-cell last-row-cell odd-row-cell"
           first-column=""
           id="vaadin-grid-cell-8"
           part="cell body-cell first-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -641,6 +687,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
         </td>
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell last-column-cell last-row-cell odd-row-cell"
           id="vaadin-grid-cell-9"
           last-column=""
           part="cell body-cell last-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -656,6 +703,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
     <tbody id="emptystatebody">
       <tr id="emptystaterow">
         <td
+          class="empty-state"
           id="emptystatecell"
           part="empty-state"
           tabindex="0"
@@ -675,6 +723,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
     >
       <tr
         aria-rowindex="4"
+        class="footer-row row"
         hidden=""
         part="row footer-row"
         role="row"
@@ -682,6 +731,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
         tabindex="-1"
       >
         <td
+          class="cell first-column-cell footer-cell"
           first-column=""
           id="vaadin-grid-cell-2"
           part="cell footer-cell first-column-cell"
@@ -693,6 +743,7 @@ snapshots["vaadin-grid basic shadow details opened"] =
           </slot>
         </td>
         <td
+          class="cell footer-cell last-column-cell"
           id="vaadin-grid-cell-3"
           last-column=""
           part="cell footer-cell last-column-cell"
@@ -706,7 +757,10 @@ snapshots["vaadin-grid basic shadow details opened"] =
       </tr>
     </tfoot>
   </table>
-  <div part="reorder-ghost">
+  <div
+    class="reorder-ghost"
+    part="reorder-ghost"
+  >
   </div>
 </div>
 <slot name="tooltip">
@@ -742,6 +796,7 @@ snapshots["vaadin-grid basic shadow hidden column"] =
     <tbody>
       <tr>
         <td
+          class="body-cell cell first-column-cell last-column-cell"
           first-column=""
           id="vaadin-grid-cell-5"
           last-column=""
@@ -762,12 +817,14 @@ snapshots["vaadin-grid basic shadow hidden column"] =
     >
       <tr
         aria-rowindex="1"
+        class="first-header-row header-row last-header-row row"
         part="row header-row first-header-row last-header-row"
         role="row"
         style="--_grid-horizontal-scroll-position: 0px;"
         tabindex="-1"
       >
         <th
+          class="cell first-column-cell first-header-row-cell header-cell last-column-cell last-header-row-cell"
           first-column=""
           id="vaadin-grid-cell-1"
           last-column=""
@@ -789,6 +846,7 @@ snapshots["vaadin-grid basic shadow hidden column"] =
       <tr
         aria-rowindex="2"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row even-row first-row row"
         drag-disabled=""
         drop-disabled=""
         even=""
@@ -800,6 +858,7 @@ snapshots["vaadin-grid basic shadow hidden column"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-column-cell first-row-cell last-column-cell"
           first-column=""
           id="vaadin-grid-cell-7"
           last-column=""
@@ -815,6 +874,7 @@ snapshots["vaadin-grid basic shadow hidden column"] =
       <tr
         aria-rowindex="3"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row last-row odd-row row"
         drag-disabled=""
         drop-disabled=""
         last=""
@@ -826,6 +886,7 @@ snapshots["vaadin-grid basic shadow hidden column"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell first-column-cell last-column-cell last-row-cell odd-row-cell"
           first-column=""
           id="vaadin-grid-cell-9"
           last-column=""
@@ -842,6 +903,7 @@ snapshots["vaadin-grid basic shadow hidden column"] =
     <tbody id="emptystatebody">
       <tr id="emptystaterow">
         <td
+          class="empty-state"
           id="emptystatecell"
           part="empty-state"
           tabindex="0"
@@ -861,6 +923,7 @@ snapshots["vaadin-grid basic shadow hidden column"] =
     >
       <tr
         aria-rowindex="4"
+        class="footer-row row"
         hidden=""
         part="row footer-row"
         role="row"
@@ -868,6 +931,7 @@ snapshots["vaadin-grid basic shadow hidden column"] =
         tabindex="-1"
       >
         <td
+          class="cell first-column-cell footer-cell last-column-cell"
           first-column=""
           id="vaadin-grid-cell-3"
           last-column=""
@@ -882,7 +946,10 @@ snapshots["vaadin-grid basic shadow hidden column"] =
       </tr>
     </tfoot>
   </table>
-  <div part="reorder-ghost">
+  <div
+    class="reorder-ghost"
+    part="reorder-ghost"
+  >
   </div>
 </div>
 <slot name="tooltip">
@@ -918,6 +985,7 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
     <tbody>
       <tr>
         <td
+          class="body-cell cell first-column-cell last-column-cell"
           first-column=""
           id="vaadin-grid-cell-5"
           last-column=""
@@ -938,12 +1006,14 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
     >
       <tr
         aria-rowindex="1"
+        class="first-header-row header-row last-header-row row"
         part="row header-row first-header-row last-header-row"
         role="row"
         style="--_grid-horizontal-scroll-position: 0px;"
         tabindex="-1"
       >
         <th
+          class="cell first-column-cell first-header-row-cell header-cell last-column-cell last-header-row-cell"
           first-column=""
           id="vaadin-grid-cell-1"
           last-column=""
@@ -965,6 +1035,7 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
       <tr
         aria-rowindex="2"
         aria-selected="true"
+        class="body-row drag-disabled-row drop-disabled-row even-row first-row row selected-row"
         drag-disabled=""
         drop-disabled=""
         even=""
@@ -977,6 +1048,7 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
       >
         <td
           aria-selected="true"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-column-cell first-row-cell last-column-cell selected-row-cell"
           first-column=""
           id="vaadin-grid-cell-7"
           last-column=""
@@ -992,6 +1064,7 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
       <tr
         aria-rowindex="3"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row last-row odd-row row"
         drag-disabled=""
         drop-disabled=""
         last=""
@@ -1003,6 +1076,7 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell first-column-cell last-column-cell last-row-cell odd-row-cell"
           first-column=""
           id="vaadin-grid-cell-9"
           last-column=""
@@ -1019,6 +1093,7 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
     <tbody id="emptystatebody">
       <tr id="emptystaterow">
         <td
+          class="empty-state"
           id="emptystatecell"
           part="empty-state"
           tabindex="0"
@@ -1038,6 +1113,7 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
     >
       <tr
         aria-rowindex="4"
+        class="footer-row row"
         hidden=""
         part="row footer-row"
         role="row"
@@ -1045,6 +1121,7 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
         tabindex="-1"
       >
         <td
+          class="cell first-column-cell footer-cell last-column-cell"
           first-column=""
           id="vaadin-grid-cell-3"
           last-column=""
@@ -1059,7 +1136,10 @@ snapshots["vaadin-grid basic shadow hidden column selected"] =
       </tr>
     </tfoot>
   </table>
-  <div part="reorder-ghost">
+  <div
+    class="reorder-ghost"
+    part="reorder-ghost"
+  >
   </div>
 </div>
 <slot name="tooltip">
@@ -1096,6 +1176,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
     <tbody>
       <tr>
         <td
+          class="body-cell cell first-column-cell"
           first-column=""
           id="vaadin-grid-cell-4"
           part="cell body-cell first-column-cell"
@@ -1107,6 +1188,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
           </slot>
         </td>
         <td
+          class="body-cell cell last-column-cell"
           id="vaadin-grid-cell-5"
           last-column=""
           part="cell body-cell last-column-cell"
@@ -1126,12 +1208,14 @@ snapshots["vaadin-grid basic shadow with footer"] =
     >
       <tr
         aria-rowindex="1"
+        class="first-header-row header-row last-header-row row"
         part="row header-row first-header-row last-header-row"
         role="row"
         style="--_grid-horizontal-scroll-position: 0px;"
         tabindex="-1"
       >
         <th
+          class="cell first-column-cell first-header-row-cell header-cell last-header-row-cell"
           first-column=""
           id="vaadin-grid-cell-0"
           part="cell header-cell first-column-cell first-header-row-cell last-header-row-cell"
@@ -1143,6 +1227,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
           </slot>
         </th>
         <th
+          class="cell first-header-row-cell header-cell last-column-cell last-header-row-cell"
           id="vaadin-grid-cell-1"
           last-column=""
           part="cell header-cell last-column-cell first-header-row-cell last-header-row-cell"
@@ -1163,6 +1248,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
       <tr
         aria-rowindex="2"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row even-row first-row row"
         drag-disabled=""
         drop-disabled=""
         even=""
@@ -1174,6 +1260,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-column-cell first-row-cell"
           first-column=""
           id="vaadin-grid-cell-6"
           part="cell body-cell first-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -1186,6 +1273,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
         </td>
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-row-cell last-column-cell"
           id="vaadin-grid-cell-7"
           last-column=""
           part="cell body-cell last-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -1200,6 +1288,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
       <tr
         aria-rowindex="3"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row last-row odd-row row"
         drag-disabled=""
         drop-disabled=""
         last=""
@@ -1211,6 +1300,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell first-column-cell last-row-cell odd-row-cell"
           first-column=""
           id="vaadin-grid-cell-8"
           part="cell body-cell first-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -1223,6 +1313,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
         </td>
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell last-column-cell last-row-cell odd-row-cell"
           id="vaadin-grid-cell-9"
           last-column=""
           part="cell body-cell last-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -1238,6 +1329,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
     <tbody id="emptystatebody">
       <tr id="emptystaterow">
         <td
+          class="empty-state"
           id="emptystatecell"
           part="empty-state"
           tabindex="0"
@@ -1257,12 +1349,14 @@ snapshots["vaadin-grid basic shadow with footer"] =
     >
       <tr
         aria-rowindex="4"
+        class="first-footer-row footer-row last-footer-row row"
         part="row footer-row first-footer-row last-footer-row"
         role="row"
         style="--_grid-horizontal-scroll-position: 0px;"
         tabindex="-1"
       >
         <td
+          class="cell first-column-cell first-footer-row-cell footer-cell last-footer-row-cell"
           first-column=""
           id="vaadin-grid-cell-2"
           part="cell footer-cell first-column-cell first-footer-row-cell last-footer-row-cell"
@@ -1274,6 +1368,7 @@ snapshots["vaadin-grid basic shadow with footer"] =
           </slot>
         </td>
         <td
+          class="cell first-footer-row-cell footer-cell last-column-cell last-footer-row-cell"
           id="vaadin-grid-cell-3"
           last-column=""
           part="cell footer-cell last-column-cell first-footer-row-cell last-footer-row-cell"
@@ -1287,7 +1382,10 @@ snapshots["vaadin-grid basic shadow with footer"] =
       </tr>
     </tfoot>
   </table>
-  <div part="reorder-ghost">
+  <div
+    class="reorder-ghost"
+    part="reorder-ghost"
+  >
   </div>
 </div>
 <slot name="tooltip">
@@ -1323,6 +1421,7 @@ snapshots["vaadin-grid column groups default"] =
     <tbody>
       <tr>
         <td
+          class="body-cell cell first-column-cell"
           first-column=""
           id="vaadin-grid-cell-6"
           part="cell body-cell first-column-cell"
@@ -1334,6 +1433,7 @@ snapshots["vaadin-grid column groups default"] =
           </slot>
         </td>
         <td
+          class="body-cell cell last-column-cell"
           id="vaadin-grid-cell-7"
           last-column=""
           part="cell body-cell last-column-cell"
@@ -1353,6 +1453,7 @@ snapshots["vaadin-grid column groups default"] =
     >
       <tr
         aria-rowindex="1"
+        class="header-row row"
         hidden=""
         part="row header-row"
         role="row"
@@ -1360,6 +1461,7 @@ snapshots["vaadin-grid column groups default"] =
       >
         <th
           aria-colspan="2"
+          class="cell first-column-cell header-cell last-column-cell"
           colspan="2"
           first-column=""
           id="vaadin-grid-cell-0"
@@ -1375,12 +1477,14 @@ snapshots["vaadin-grid column groups default"] =
       </tr>
       <tr
         aria-rowindex="2"
+        class="first-header-row header-row last-header-row row"
         part="row header-row last-header-row first-header-row"
         role="row"
         style="--_grid-horizontal-scroll-position: 0px;"
         tabindex="-1"
       >
         <th
+          class="cell first-column-cell first-header-row-cell header-cell last-header-row-cell"
           first-column=""
           id="vaadin-grid-cell-1"
           part="cell header-cell first-column-cell last-header-row-cell first-header-row-cell"
@@ -1392,6 +1496,7 @@ snapshots["vaadin-grid column groups default"] =
           </slot>
         </th>
         <th
+          class="cell first-header-row-cell header-cell last-column-cell last-header-row-cell"
           id="vaadin-grid-cell-2"
           last-column=""
           part="cell header-cell last-column-cell last-header-row-cell first-header-row-cell"
@@ -1412,6 +1517,7 @@ snapshots["vaadin-grid column groups default"] =
       <tr
         aria-rowindex="2"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row even-row first-row row"
         drag-disabled=""
         drop-disabled=""
         even=""
@@ -1423,6 +1529,7 @@ snapshots["vaadin-grid column groups default"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-column-cell first-row-cell"
           first-column=""
           id="vaadin-grid-cell-8"
           part="cell body-cell first-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -1435,6 +1542,7 @@ snapshots["vaadin-grid column groups default"] =
         </td>
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell even-row-cell first-row-cell last-column-cell"
           id="vaadin-grid-cell-9"
           last-column=""
           part="cell body-cell last-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -1449,6 +1557,7 @@ snapshots["vaadin-grid column groups default"] =
       <tr
         aria-rowindex="3"
         aria-selected="false"
+        class="body-row drag-disabled-row drop-disabled-row last-row odd-row row"
         drag-disabled=""
         drop-disabled=""
         last=""
@@ -1460,6 +1569,7 @@ snapshots["vaadin-grid column groups default"] =
       >
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell first-column-cell last-row-cell odd-row-cell"
           first-column=""
           id="vaadin-grid-cell-10"
           part="cell body-cell first-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -1472,6 +1582,7 @@ snapshots["vaadin-grid column groups default"] =
         </td>
         <td
           aria-selected="false"
+          class="body-cell cell drag-disabled-row-cell drop-disabled-row-cell last-column-cell last-row-cell odd-row-cell"
           id="vaadin-grid-cell-11"
           last-column=""
           part="cell body-cell last-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
@@ -1487,6 +1598,7 @@ snapshots["vaadin-grid column groups default"] =
     <tbody id="emptystatebody">
       <tr id="emptystaterow">
         <td
+          class="empty-state"
           id="emptystatecell"
           part="empty-state"
           tabindex="0"
@@ -1506,12 +1618,14 @@ snapshots["vaadin-grid column groups default"] =
     >
       <tr
         aria-rowindex="4"
+        class="first-footer-row footer-row last-footer-row row"
         part="row footer-row first-footer-row last-footer-row"
         role="row"
         style="--_grid-horizontal-scroll-position: 0px;"
         tabindex="-1"
       >
         <td
+          class="cell first-column-cell first-footer-row-cell footer-cell last-footer-row-cell"
           first-column=""
           id="vaadin-grid-cell-3"
           part="cell footer-cell first-column-cell first-footer-row-cell last-footer-row-cell"
@@ -1523,6 +1637,7 @@ snapshots["vaadin-grid column groups default"] =
           </slot>
         </td>
         <td
+          class="cell first-footer-row-cell footer-cell last-column-cell last-footer-row-cell"
           id="vaadin-grid-cell-4"
           last-column=""
           part="cell footer-cell last-column-cell first-footer-row-cell last-footer-row-cell"
@@ -1536,6 +1651,7 @@ snapshots["vaadin-grid column groups default"] =
       </tr>
       <tr
         aria-rowindex="5"
+        class="footer-row row"
         hidden=""
         part="row footer-row"
         role="row"
@@ -1543,6 +1659,7 @@ snapshots["vaadin-grid column groups default"] =
       >
         <td
           aria-colspan="2"
+          class="cell first-column-cell footer-cell last-column-cell"
           colspan="2"
           first-column=""
           id="vaadin-grid-cell-5"
@@ -1558,7 +1675,10 @@ snapshots["vaadin-grid column groups default"] =
       </tr>
     </tfoot>
   </table>
-  <div part="reorder-ghost">
+  <div
+    class="reorder-ghost"
+    part="reorder-ghost"
+  >
   </div>
 </div>
 <slot name="tooltip">
@@ -1579,12 +1699,14 @@ snapshots["vaadin-grid column groups with header"] =
 >
   <tr
     aria-rowindex="1"
+    class="first-header-row header-row row"
     part="row header-row first-header-row"
     role="row"
     tabindex="-1"
   >
     <th
       aria-colspan="2"
+      class="cell first-column-cell first-header-row-cell header-cell last-column-cell"
       colspan="2"
       first-column=""
       id="vaadin-grid-cell-0"
@@ -1600,12 +1722,14 @@ snapshots["vaadin-grid column groups with header"] =
   </tr>
   <tr
     aria-rowindex="2"
+    class="header-row last-header-row row"
     part="row header-row last-header-row"
     role="row"
     style="--_grid-horizontal-scroll-position: 0px;"
     tabindex="-1"
   >
     <th
+      class="cell first-column-cell header-cell last-header-row-cell"
       first-column=""
       id="vaadin-grid-cell-1"
       part="cell header-cell first-column-cell last-header-row-cell"
@@ -1617,6 +1741,7 @@ snapshots["vaadin-grid column groups with header"] =
       </slot>
     </th>
     <th
+      class="cell header-cell last-column-cell last-header-row-cell"
       id="vaadin-grid-cell-2"
       last-column=""
       part="cell header-cell last-column-cell last-header-row-cell"
@@ -1640,12 +1765,14 @@ snapshots["vaadin-grid column groups with footer"] =
 >
   <tr
     aria-rowindex="4"
+    class="first-footer-row footer-row row"
     part="row footer-row first-footer-row"
     role="row"
     style="--_grid-horizontal-scroll-position: 0px;"
     tabindex="-1"
   >
     <td
+      class="cell first-column-cell first-footer-row-cell footer-cell"
       first-column=""
       id="vaadin-grid-cell-3"
       part="cell footer-cell first-column-cell first-footer-row-cell"
@@ -1657,6 +1784,7 @@ snapshots["vaadin-grid column groups with footer"] =
       </slot>
     </td>
     <td
+      class="cell first-footer-row-cell footer-cell last-column-cell"
       id="vaadin-grid-cell-4"
       last-column=""
       part="cell footer-cell last-column-cell first-footer-row-cell"
@@ -1670,12 +1798,14 @@ snapshots["vaadin-grid column groups with footer"] =
   </tr>
   <tr
     aria-rowindex="5"
+    class="footer-row last-footer-row row"
     part="row footer-row last-footer-row"
     role="row"
     tabindex="-1"
   >
     <td
       aria-colspan="2"
+      class="cell first-column-cell footer-cell last-column-cell last-footer-row-cell"
       colspan="2"
       first-column=""
       id="vaadin-grid-cell-5"
diff --git a/packages/grid/test/styling.test.js b/packages/grid/test/styling.test.js
index 933f59a526..e515ecacc5 100644
--- a/packages/grid/test/styling.test.js
+++ b/packages/grid/test/styling.test.js
@@ -23,52 +23,52 @@ describe('styling', () => {
 
   function runStylingTest(entries, generatorFn, requestFn, assertCallback) {
     it(`should add ${entries} for cells`, () => {
-      grid[generatorFn] = () => 'foo';
-      assertCallback(['foo']);
-      assertCallback(['foo'], 1, 1);
+      grid[generatorFn] = () => 'test-foo';
+      assertCallback(['test-foo']);
+      assertCallback(['test-foo'], 1, 1);
     });
 
     it(`should add all ${entries} separated by whitespaces`, () => {
-      grid[generatorFn] = () => 'foo bar baz';
-      assertCallback(['foo', 'bar', 'baz']);
+      grid[generatorFn] = () => 'test-foo test-bar test-baz';
+      assertCallback(['test-foo', 'test-bar', 'test-baz']);
     });
 
     it(`should not remove existing ${entries}`, () => {
       if (entries === 'classes') {
-        firstCell.classList.add('bar');
+        firstCell.classList.add('test-bar');
       } else {
-        firstCell.setAttribute('part', `${firstCell.getAttribute('part')} bar`);
+        firstCell.setAttribute('part', `${firstCell.getAttribute('part')} test-bar`);
       }
 
-      grid[generatorFn] = () => 'foo';
-      assertCallback(['bar', 'foo']);
+      grid[generatorFn] = () => 'test-foo';
+      assertCallback(['test-bar', 'test-foo']);
     });
 
     it(`should remove old generated ${entries}`, () => {
-      grid[generatorFn] = () => 'foo';
-      grid[generatorFn] = () => 'bar'; // NOSONAR
-      assertCallback(['bar']);
+      grid[generatorFn] = () => 'test-foo';
+      grid[generatorFn] = () => 'test-bar'; // NOSONAR
+      assertCallback(['test-bar']);
     });
 
     it(`should provide column and model as parameters to ${generatorFn}`, () => {
-      grid[generatorFn] = (column, model) => `${model.index} ${model.item.value} ${column.header}`;
-      assertCallback(['5', 'foo5', 'col1'], 5, 1);
-      assertCallback(['10', 'foo10', 'col0'], 10, 0);
+      grid[generatorFn] = (column, model) => `test-${model.index} test-${model.item.value} test-${column.header}`;
+      assertCallback(['test-5', 'test-foo5', 'test-col1'], 5, 1);
+      assertCallback(['test-10', 'test-foo10', 'test-col0'], 10, 0);
     });
 
     it(`should call ${generatorFn} for details cell with undefined column`, async () => {
       grid.rowDetailsRenderer = () => {};
-      grid[generatorFn] = (column, model) => `${model.index} ${column}`;
+      grid[generatorFn] = (column, model) => `test-${model.index} test-${column}`;
       await nextFrame();
       flushGrid(grid);
-      assertCallback(['0', 'undefined'], 0, 2);
+      assertCallback(['test-0', 'test-undefined'], 0, 2);
     });
 
     it(`should add ${entries} when loading new items`, (done) => {
-      grid[generatorFn] = (_, model) => model.item.value;
+      grid[generatorFn] = (_, model) => `test-${model.item.value}`;
       scrollToEnd(grid, () => {
         const rows = getRows(grid.$.items);
-        assertCallback(['foo199'], rows.length - 1, 0);
+        assertCallback(['test-foo199'], rows.length - 1, 0);
         done();
       });
     });
@@ -80,13 +80,13 @@ describe('styling', () => {
     });
 
     it(`should clear generated ${entries} with falsy return value`, () => {
-      grid[generatorFn] = () => 'foo';
+      grid[generatorFn] = () => 'test-foo';
       grid[generatorFn] = () => {}; // NOSONAR
       assertCallback([]);
     });
 
     it(`should clear generated ${entries} with falsy property value`, () => {
-      grid[generatorFn] = () => 'foo';
+      grid[generatorFn] = () => 'test-foo';
       grid[generatorFn] = undefined; // NOSONAR
       assertCallback([]);
     });
@@ -94,11 +94,11 @@ describe('styling', () => {
     [requestFn, 'clearCache', 'requestContentUpdate'].forEach((funcName) => {
       it(`should update ${entries} on ${funcName}`, () => {
         let condition = false;
-        grid[generatorFn] = () => condition && 'foo';
+        grid[generatorFn] = () => condition && 'test-foo';
         condition = true;
         assertCallback([]);
         grid[funcName]();
-        assertCallback(['foo']);
+        assertCallback(['test-foo']);
       });
     });
 
@@ -113,20 +113,20 @@ describe('styling', () => {
 
     it(`should not throw when ${generatorFn} return value contains extra whitespace`, () => {
       expect(() => {
-        grid[generatorFn] = () => ' foo  bar ';
+        grid[generatorFn] = () => ' test-foo  test-bar ';
       }).not.to.throw(Error);
-      assertCallback(['foo', 'bar']);
+      assertCallback(['test-foo', 'test-bar']);
     });
 
     it(`should have the right ${entries} after toggling column visibility`, async () => {
-      grid[generatorFn] = (_column, { index }) => (index % 2 === 0 ? 'even' : 'odd');
+      grid[generatorFn] = (_column, { index }) => `test-${index % 2 === 0 ? 'even' : 'odd'}`;
       const column = grid.querySelector('vaadin-grid-column');
       column.hidden = true;
       await nextRender();
       column.hidden = false;
       await nextRender();
-      assertCallback(['odd'], 1, 0);
-      assertCallback(['odd'], 1, 1);
+      assertCallback(['test-odd'], 1, 0);
+      assertCallback(['test-odd'], 1, 1);
     });
 
     describe('async data provider', () => {
@@ -161,11 +161,11 @@ describe('styling', () => {
       });
 
       it(`should remove custom ${entries} for rows that enter loading state`, () => {
-        grid[generatorFn] = () => 'foo'; // NOSONAR
+        grid[generatorFn] = () => 'test-foo'; // NOSONAR
         clock.tick(10);
 
         expect(grid._getRenderedRows()[0].hasAttribute('loading')).to.be.false;
-        assertCallback(['foo']);
+        assertCallback(['test-foo']);
 
         grid.clearCache();
 
@@ -176,15 +176,10 @@ describe('styling', () => {
   }
 
   describe('cell class name generator', () => {
-    let initialCellClasses;
-
-    beforeEach(() => {
-      initialCellClasses = Array.from(firstCell.classList);
-    });
-
     const assertClassList = (expectedClasses, row = 0, col = 0) => {
       const cell = getContainerCell(grid.$.items, row, col);
-      expect(Array.from(cell.classList)).to.deep.equal(initialCellClasses.concat(expectedClasses));
+      expect([...cell.classList]).to.include('cell');
+      expect([...cell.classList].filter((c) => c.startsWith('test-'))).to.deep.equal(expectedClasses);
     };
 
     runStylingTest('classes', 'cellClassNameGenerator', 'generateCellClassNames', assertClassList);
diff --git a/packages/vaadin-lumo-styles/src/components/grid.css b/packages/vaadin-lumo-styles/src/components/grid.css
index 2ec243c5dc..253a0580d6 100644
--- a/packages/vaadin-lumo-styles/src/components/grid.css
+++ b/packages/vaadin-lumo-styles/src/components/grid.css
@@ -118,7 +118,7 @@
     overflow: visible;
   }
 
-  [part~='row'] {
+  .row {
     display: flex;
     width: 100%;
     box-sizing: border-box;
@@ -126,23 +126,23 @@
     position: relative;
   }
 
-  [part~='row'][loading] [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
+  .body-row[loading] .body-cell ::slotted(vaadin-grid-cell-content) {
     visibility: hidden;
   }
 
-  [column-rendering='lazy'] [part~='body-cell']:not([frozen]):not([frozen-to-end]) {
+  [column-rendering='lazy'] .body-cell:not([frozen]):not([frozen-to-end]) {
     transform: translateX(var(--_grid-lazy-columns-start));
   }
 
-  #items [part~='row'] {
+  #items .body-row {
     position: absolute;
   }
 
-  #items [part~='row']:empty {
+  #items .body-row:empty {
     height: 100%;
   }
 
-  [part~='cell']:not([part~='details-cell']) {
+  .cell:not(.details-cell) {
     flex-shrink: 0;
     flex-grow: 1;
     box-sizing: border-box;
@@ -154,7 +154,7 @@
     white-space: nowrap;
   }
 
-  [part~='cell'] {
+  .cell {
     outline: none;
     min-height: var(--lumo-size-m);
     background-color: var(--vaadin-grid-cell-background, var(--lumo-base-color));
@@ -163,7 +163,7 @@
     --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-m);
   }
 
-  [part~='cell'] > [tabindex] {
+  .cell > [tabindex] {
     display: flex;
     align-items: inherit;
     outline: none;
@@ -173,11 +173,11 @@
 
   /* Switch the focusButtonMode wrapping element to "position: static" temporarily
      when measuring real width of the cells in the auto-width columns. */
-  [measuring-auto-width] [part~='cell'] > [tabindex] {
+  #scroller[measuring-auto-width] .cell > [tabindex] {
     position: static;
   }
 
-  [part~='details-cell'] {
+  .details-cell {
     position: absolute;
     bottom: 0;
     width: 100%;
@@ -185,7 +185,7 @@
     padding: 0;
   }
 
-  [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  .cell ::slotted(vaadin-grid-cell-content) {
     display: block;
     width: 100%;
     box-sizing: border-box;
@@ -237,13 +237,13 @@
   }
 
   /* Reordering styles */
-  :host([reordering]) [part~='cell'] ::slotted(vaadin-grid-cell-content),
-  :host([reordering]) [part~='resize-handle'],
-  #scroller[no-content-pointer-events] [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  :host([reordering]) .cell ::slotted(vaadin-grid-cell-content),
+  :host([reordering]) .resize-handle,
+  #scroller[no-content-pointer-events] .cell ::slotted(vaadin-grid-cell-content) {
     pointer-events: none;
   }
 
-  [part~='reorder-ghost'] {
+  .reorder-ghost {
     visibility: hidden;
     position: fixed;
     pointer-events: none;
@@ -263,41 +263,25 @@
   }
 
   /* Resizing styles */
-  [part~='resize-handle'] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-    cursor: col-resize;
-    z-index: 1;
-  }
 
-  [part~='resize-handle']::before {
-    position: absolute;
-    content: '';
-    height: 100%;
-    width: 35px;
-    transform: translateX(-50%);
-  }
-
-  [last-column] [part~='resize-handle']::before,
-  [last-frozen] [part~='resize-handle']::before {
+  [last-column] .resize-handle::before,
+  [last-frozen] .resize-handle::before {
     width: 18px;
     transform: none;
     right: 0;
   }
 
-  [frozen-to-end] [part~='resize-handle'] {
+  [frozen-to-end] .resize-handle {
     left: 0;
     right: auto;
   }
 
-  [frozen-to-end] [part~='resize-handle']::before {
+  [frozen-to-end] .resize-handle::before {
     left: 0;
     right: auto;
   }
 
-  [first-frozen-to-end] [part~='resize-handle']::before {
+  [first-frozen-to-end] .resize-handle::before {
     width: 18px;
     transform: none;
   }
@@ -308,7 +292,7 @@
   }
 
   /* Hide resize handle if scrolled to end */
-  :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
+  :host(:not([overflow~='end'])) [first-frozen-to-end] .resize-handle {
     display: none;
   }
 
@@ -325,15 +309,15 @@
     visibility: hidden;
   }
 
-  #sizer [part~='details-cell'] {
+  #sizer .details-cell {
     display: none !important;
   }
 
-  #sizer [part~='cell'][hidden] {
+  #sizer .cell[hidden] {
     display: none !important;
   }
 
-  #sizer [part~='cell'] {
+  #sizer .cell {
     display: block;
     flex-shrink: 0;
     line-height: 0;
@@ -344,11 +328,11 @@
     border: none !important;
   }
 
-  #sizer [part~='cell']::before {
+  #sizer .cell::before {
     content: '-';
   }
 
-  #sizer [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  #sizer .cell ::slotted(vaadin-grid-cell-content) {
     display: none !important;
   }
 
@@ -360,32 +344,32 @@
     left: auto;
   }
 
-  :host([dir='rtl']) [part~='reorder-ghost'] {
+  :host([dir='rtl']) .reorder-ghost {
     left: auto;
     right: 0;
   }
 
-  :host([dir='rtl']) [part~='resize-handle'] {
+  :host([dir='rtl']) .resize-handle {
     left: 0;
     right: auto;
   }
 
-  :host([dir='rtl']) [part~='resize-handle']::before {
+  :host([dir='rtl']) .resize-handle::before {
     transform: translateX(50%);
   }
 
-  :host([dir='rtl']) [last-column] [part~='resize-handle']::before,
-  :host([dir='rtl']) [last-frozen] [part~='resize-handle']::before {
+  :host([dir='rtl']) [last-column] .resize-handle::before,
+  :host([dir='rtl']) [last-frozen] .resize-handle::before {
     left: 0;
     right: auto;
   }
 
-  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle'] {
+  :host([dir='rtl']) [frozen-to-end] .resize-handle {
     right: 0;
     left: auto;
   }
 
-  :host([dir='rtl']) [frozen-to-end] [part~='resize-handle']::before {
+  :host([dir='rtl']) [frozen-to-end] .resize-handle::before {
     right: 0;
     left: auto;
   }
@@ -399,25 +383,25 @@
   /* Cell styles */
 
   /* Apply row borders by default and introduce the "no-row-borders" variant */
-  :host(:not([theme~='no-row-borders'])) [part~='cell']:not([part~='details-cell']) {
+  :host(:not([theme~='no-row-borders'])) .cell:not(.details-cell) {
     border-top: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
   }
 
   /* Hide first body row top border */
-  :host(:not([theme~='no-row-borders'])) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
+  :host(:not([theme~='no-row-borders'])) .first-row .cell:not(.details-cell) {
     border-top: 0;
     min-height: calc(var(--lumo-size-m) - var(--_lumo-grid-border-width));
   }
 
   /* Focus-ring */
 
-  [part~='row']:focus,
-  [part~='focused-cell']:focus {
+  .row:focus,
+  .focused-cell:focus {
     outline: none;
   }
 
-  :host([navigating]) [part~='row']:focus::before,
-  :host([navigating]) [part~='focused-cell']:focus::before {
+  :host([navigating]) .row:focus::before,
+  :host([navigating]) .focused-cell:focus::before {
     content: '';
     position: absolute;
     inset: 0;
@@ -425,13 +409,13 @@
     box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
-  :host([navigating]) [part~='row']:focus::before {
+  :host([navigating]) .row:focus::before {
     transform: translateX(var(--_grid-horizontal-scroll-position));
     z-index: 3;
   }
 
   /* Empty state */
-  [part~='empty-state'] {
+  .empty-state {
     padding: var(--lumo-space-m);
     color: var(--lumo-secondary-text-color);
   }
@@ -446,15 +430,15 @@
     box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
   }
 
-  [part~='row'][dragover] {
+  .body-row[dragover] {
     z-index: 100 !important;
   }
 
-  [part~='row'][dragover] [part~='cell'] {
+  .body-row[dragover] .cell {
     overflow: visible;
   }
 
-  [part~='row'][dragover] [part~='cell']::after {
+  .body-row[dragover] .cell::after {
     content: '';
     position: absolute;
     inset: 0;
@@ -463,54 +447,54 @@
     background: var(--lumo-primary-color-50pct);
   }
 
-  [part~='row'][dragover] [part~='cell'][last-frozen]::after {
+  .body-row[dragover] .cell[last-frozen]::after {
     right: -1px;
   }
 
-  :host([theme~='no-row-borders']) [dragover] [part~='cell']::after {
+  :host([theme~='no-row-borders']) [dragover] .cell::after {
     height: 2px;
   }
 
-  [part~='row'][dragover='below'] [part~='cell']::after {
+  .body-row[dragover='below'] .cell::after {
     top: 100%;
     bottom: auto;
     margin-top: -1px;
   }
 
-  :host([all-rows-visible]) [part~='last-row'][dragover='below'] [part~='cell']::after {
+  :host([all-rows-visible]) .last-row[dragover='below'] .cell::after {
     height: 1px;
   }
 
-  [part~='row'][dragover='above'] [part~='cell']::after {
+  .row[dragover='above'] .cell::after {
     top: auto;
     bottom: 100%;
     margin-bottom: -1px;
   }
 
-  [part~='row'][details-opened][dragover='below'] [part~='cell']:not([part~='details-cell'])::after,
-  [part~='row'][details-opened][dragover='above'] [part~='details-cell']::after {
+  .row[details-opened][dragover='below'] .cell:not(.details-cell)::after,
+  .row[details-opened][dragover='above'] .details-cell::after {
     display: none;
   }
 
-  [part~='row'][dragover][dragover='on-top'] [part~='cell']::after {
+  .row[dragover][dragover='on-top'] .cell::after {
     height: 100%;
     opacity: 0.5;
   }
 
-  [part~='row'][dragstart] [part~='cell'] {
+  .row[dragstart] .cell {
     border: none !important;
     box-shadow: none !important;
   }
 
-  [part~='row'][dragstart] [part~='cell'][last-column] {
+  .row[dragstart] .cell[last-column] {
     border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
   }
 
-  [part~='row'][dragstart] [part~='cell'][first-column] {
+  .row[dragstart] .cell[first-column] {
     border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
   }
 
-  #scroller [part~='row'][dragstart]:not([dragstart=''])::after {
+  #scroller .row[dragstart]:not([dragstart=''])::after {
     display: block;
     position: absolute;
     left: var(--_grid-drag-start-x);
@@ -536,99 +520,108 @@
 
   /* Headers and footers */
 
-  [part~='header-cell'],
-  [part~='footer-cell'],
-  [part~='reorder-ghost'] {
+  .header-cell,
+  .footer-cell,
+  .reorder-ghost {
     font-size: var(--lumo-font-size-s);
     font-weight: 500;
   }
 
-  [part~='footer-cell'] {
+  .footer-cell {
     font-weight: 400;
   }
 
-  [part~='row']:only-child [part~='header-cell'] {
+  .header-row:only-child .header-cell {
     min-height: var(--lumo-size-xl);
   }
 
   /* Header borders */
 
   /* Hide first header row top border */
-  :host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='header-cell'] {
+  :host(:not([theme~='no-row-borders'])) .first-header-row .header-cell {
     border-top: 0;
   }
 
   /* Hide header row top border if previous row is hidden */
-  [part~='row'][hidden] + [part~='row'] [part~='header-cell'] {
+  .header-row[hidden] + .header-row .header-cell {
     border-top: 0;
   }
 
-  [part~='row']:last-child [part~='header-cell'] {
+  .last-header-row .header-cell {
     border-bottom: var(--_lumo-grid-border-width) solid transparent;
   }
 
-  :host(:not([theme~='no-row-borders'])) [part~='row']:last-child [part~='header-cell'] {
+  :host(:not([theme~='no-row-borders'])) .last-header-row .header-cell {
     border-bottom-color: var(--_lumo-grid-secondary-border-color);
   }
 
   /* Overflow uses a stronger border color */
-  :host([overflow~='top']) [part~='row']:last-child [part~='header-cell'] {
+  :host([overflow~='top']) .last-header-row .header-cell {
     border-bottom-color: var(--_lumo-grid-border-color);
   }
 
   /* Footer borders */
 
-  [part~='row']:first-child [part~='footer-cell'] {
+  .first-footer-row .footer-cell {
     border-top: var(--_lumo-grid-border-width) solid transparent;
   }
 
-  :host(:not([theme~='no-row-borders'])) [part~='row']:first-child [part~='footer-cell'] {
+  :host(:not([theme~='no-row-borders'])) .first-footer-row .footer-cell {
     border-top-color: var(--_lumo-grid-secondary-border-color);
   }
 
   /* Overflow uses a stronger border color */
-  :host([overflow~='bottom']) [part~='row']:first-child [part~='footer-cell'] {
+  :host([overflow~='bottom']) .first-footer-row .footer-cell {
     border-top-color: var(--_lumo-grid-border-color);
   }
 
   /* Column reordering */
 
-  :host([reordering]) [part~='cell'] {
+  :host([reordering]) .cell {
     background: linear-gradient(var(--lumo-shade-20pct), var(--lumo-shade-20pct)) var(--lumo-base-color);
   }
 
-  :host([reordering]) [part~='cell'][reorder-status='allowed'] {
+  :host([reordering]) .cell[reorder-status='allowed'] {
     background: var(--lumo-base-color);
   }
 
-  :host([reordering]) [part~='cell'][reorder-status='dragging'] {
+  :host([reordering]) .cell[reorder-status='dragging'] {
     background: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)) var(--lumo-base-color);
   }
 
   /* Column resizing */
 
-  [part='resize-handle'] {
+  .resize-handle {
     --_resize-handle-width: 3px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 1;
     width: var(--_resize-handle-width);
     background-color: var(--lumo-primary-color-50pct);
     opacity: 0;
     transition: opacity 0.2s;
   }
 
-  [part='resize-handle']::before {
+  .resize-handle::before {
+    position: absolute;
+    content: '';
+    height: 100%;
     transform: translateX(calc(-50% + var(--_resize-handle-width) / 2));
     width: var(--lumo-size-s);
   }
 
-  :host(:not([reordering])) *:not([column-resizing]) [part~='cell']:hover [part='resize-handle'],
-  [part='resize-handle']:active {
+  :host(:not([reordering])) *:not([column-resizing]) .cell:hover .resize-handle,
+  .resize-handle:active {
     opacity: 1;
     transition-delay: 0.15s;
   }
 
   /* Column borders */
 
-  :host([theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
+  :host([theme~='column-borders']) .cell:not([last-column]):not(.details-cell) {
     border-right: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
   }
 
@@ -639,18 +632,18 @@
     overflow: hidden;
   }
 
-  :host([overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+  :host([overflow~='start']) .cell[last-frozen]:not(.details-cell) {
     border-right-color: var(--_lumo-grid-border-color);
   }
 
-  :host([overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
+  :host([overflow~='end']) .cell[first-frozen-to-end]:not(.details-cell) {
     border-left-color: var(--_lumo-grid-border-color);
   }
 
   /* Row stripes */
 
-  :host([theme~='row-stripes']) [part~='even-row'] [part~='body-cell'],
-  :host([theme~='row-stripes']) [part~='even-row'] [part~='details-cell'] {
+  :host([theme~='row-stripes']) .even-row .body-cell,
+  :host([theme~='row-stripes']) .even-row .details-cell {
     background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
     background-repeat: repeat-x;
   }
@@ -658,56 +651,56 @@
   /* Selected row */
 
   /* Raise the selected rows above unselected rows (so that box-shadow can cover unselected rows) */
-  :host(:not([reordering])) [part~='row'][selected] {
+  :host(:not([reordering])) .row[selected] {
     z-index: 1;
   }
 
-  :host(:not([reordering])) [part~='row'][selected] [part~='body-cell']:not([part~='details-cell']) {
+  :host(:not([reordering])) .row[selected] .body-cell:not(.details-cell) {
     background-image: linear-gradient(var(--_lumo-grid-selected-row-color), var(--_lumo-grid-selected-row-color));
     background-repeat: repeat;
   }
 
   /* Cover the border of an unselected row */
-  :host(:not([theme~='no-row-borders'])) [part~='row'][selected] [part~='cell']:not([part~='details-cell']) {
+  :host(:not([theme~='no-row-borders'])) .row[selected] .cell:not(.details-cell) {
     box-shadow: 0 var(--_lumo-grid-border-width) 0 0 var(--_lumo-grid-selected-row-color);
   }
 
   /* Compact */
 
-  :host([theme~='compact']) [part~='row']:only-child [part~='header-cell'] {
+  :host([theme~='compact']) .header-row:only-child .header-cell {
     min-height: var(--lumo-size-m);
   }
 
-  :host([theme~='compact']) [part~='cell'] {
+  :host([theme~='compact']) .cell {
     min-height: var(--lumo-size-s);
     --_cell-default-padding: var(--lumo-space-xs) var(--lumo-space-s);
   }
 
-  :host([theme~='compact']) [part~='first-row'] [part~='cell']:not([part~='details-cell']) {
+  :host([theme~='compact']) .first-row .cell:not(.details-cell) {
     min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
   }
 
-  :host([theme~='compact']) [part~='empty-state'] {
+  :host([theme~='compact']) .empty-state {
     padding: var(--lumo-space-s);
   }
 
   /* Wrap cell contents */
 
-  :host([theme~='wrap-cell-content']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+  :host([theme~='wrap-cell-content']) .cell ::slotted(vaadin-grid-cell-content) {
     white-space: normal;
   }
 
   /* RTL specific styles */
 
-  :host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][last-column] {
+  :host([dir='rtl']) .row[dragstart] .cell[last-column] {
     border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
   }
 
-  :host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][first-column] {
+  :host([dir='rtl']) .row[dragstart] .cell[first-column] {
     border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
   }
 
-  :host([dir='rtl'][theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
+  :host([dir='rtl'][theme~='column-borders']) .cell:not([last-column]):not(.details-cell) {
     border-right: none;
     border-left: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
   }
@@ -722,16 +715,16 @@
     border-right: var(--_lumo-grid-border-width) solid transparent;
   }
 
-  :host([dir='rtl'][overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+  :host([dir='rtl'][overflow~='start']) .cell[last-frozen]:not(.details-cell) {
     border-left-color: var(--_lumo-grid-border-color);
   }
 
-  :host([dir='rtl'][overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
+  :host([dir='rtl'][overflow~='end']) .cell[first-frozen-to-end]:not(.details-cell) {
     border-right-color: var(--_lumo-grid-border-color);
   }
 
   @media (forced-colors: active) {
-    [part~='selected-row'] [part~='first-column-cell']::after {
+    .selected-row .first-column-cell::after {
       content: '';
       position: absolute;
       top: 0;
@@ -740,7 +733,7 @@
       border: 2px solid;
     }
 
-    [part~='focused-cell']::before {
+    .focused-cell::before {
       outline: 2px solid !important;
       outline-offset: -1px;
     }