dom-if条件为false时元素未隐藏的Grid TemplateRenderer渲染问题

• dom-if用法错误：dom-if 是 Polymer 提供的条件渲染指令，必须绑定在 <template> 标签的 is 属性上才能生效，你当前直接将 is='dom-if' 写在自定义组件 <memory-card>、<graphics-card-card> 标签上，条件判断逻辑完全不会触发，因此无论 if 绑定的值是 true 还是 false，两个自定义组件都会被渲染。
• 重复渲染原因：Vaadin Grid 行渲染时会触发两次数据绑定流程：第一次是行初始化占位，第二次是实际数据注入，加上你的条件渲染失效，两个卡片每次绑定都会渲染，最终呈现出每个模板被渲染两次的现象。

方案1：修正现有模板逻辑（保留TemplateRenderer实现） #

修改两个卡片类的模板字符串，把自定义组件套在带dom-if的template标签内即可，示例如下：

// MemoryCard类的模板修改
public static String getTemplateString() {
    return "<template is='dom-if' if='[[item.isMemory]]'>"
            + "<memory-card part-card='[[item.partCard]]'></memory-card>"
            + "</template>";
}

GraphicsCardCard类的模板按照相同逻辑修改即可生效。

方案2：改用ComponentRenderer实现（更推荐，无需处理前端模板逻辑） #

Vaadin Grid 原生支持 ComponentRenderer 直接根据数据类型返回对应组件，逻辑更清晰也不易出错，修改 PcPartsDomIfGrid 的 initColumn 方法即可：

private void initColumn() {
    addColumn(new ComponentRenderer<>(pcPart -> {
        if (pcPart instanceof Memory) {
            return new MemoryCard((Memory) pcPart);
        } else if (pcPart instanceof GraphicsCard) {
            return new GraphicsCardCard((GraphicsCard) pcPart);
        }
        return new Span(); // 其他类型返回空占位组件
    }));
}

这个方案可以完全去掉模板拼接、dom-if判断相关的冗余代码，后续新增部件类型只需要加分支即可，维护成本更低。

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