Vaadin-Grid Polymer Element单元格渲染器迁移咨询

Alright, let's walk through migrating that old cell renderer to modern Vaadin Grid (built on Lit now). The core idea is still the same—render icons based on value—but the API has changed a bit to be more secure and aligned with modern web component practices.

Updated Code Example #

First, here's the migrated renderer, with explanations below:

// Make sure you've imported these first
import '@vaadin/grid';
import '@vaadin/icon';
import '@vaadin/icon/lumo-icons';
import { html, render } from 'lit';

// Assume 'grid' is your Vaadin Grid instance
grid.columns[6].renderer = (root, context) => {
  // Get the current cell value from the context
  const cellValue = context.value;
  
  // Clear the container before rendering (prevents duplicate content on updates)
  root.innerHTML = '';

  if (cellValue < 0) {
    render(html`
      ${Math.abs(cellValue)}
      <vaadin-icon icon="lumo:arrow-down" style="color: red;"></vaadin-icon>
    `, root);
  } else if (cellValue > 0) {
    render(html`
      ${cellValue}
      <vaadin-icon icon="lumo:arrow-up" style="color: green;"></vaadin-icon>
    `, root);
  } else {
    render(html`
      <vaadin-icon icon="lumo:minus"></vaadin-icon>
    `, root);
  }
};

Key Differences from Your Original Code #

• Renderer Parameters: Instead of a single cell object, modern renderers get root (the DOM container for your cell content) and context (holds the cell value, data item, column info, etc.).
• Safer Rendering: We use Lit's html template and render function instead of directly setting innerHTML. This prevents XSS risks and fits with how modern Vaadin components work. If you really want to use innerHTML for a quick port, you can (but it's not recommended):

  // Quick and dirty (not ideal for security)
  if (cellValue < 0) {
    root.innerHTML = `${Math.abs(cellValue)}<vaadin-icon icon="lumo:arrow-down" style="color: red;"></vaadin-icon>`;
  }
  

• Icon Component Change: iron-icon is deprecated—use vaadin-icon instead. We're using Lumo icons here (the default for Vaadin), but if you prefer Material Icons, import @vaadin/icon/material-icons and use icon="material:arrow-upward" instead.
• Clear the Container: Always clear the root container before rendering new content, since the renderer runs every time the cell updates (e.g., when sorting, filtering, or data changes).

Setup Notes #

Don't forget to install the required packages if you haven't already:

npm install @vaadin/grid @vaadin/icon @vaadin/icon/lumo-icons lit

内容的提问来源于stack exchange，提问作者Riposte