web-component - lit：将昂贵的 dom 包装在不同的标签中

Question

我的<lit-parent>组件中有一个昂贵的 DOM 节点列表，在特定条件下（例如父元素宽度 < 500px）需要包装在另一个组件中（例如画廊）：

render() {
    const expensive = this.vehicles.map(vehicle => html`<lit-vehicle id=${vehicle.id}?></vehicle>`);

    return this.someCondition ? html`<lit-gallery>${expensive}</lit-gallery>` : expensive;   
}

问题是，每次条件更改时，昂贵元素的列表都会被破坏并在 DOM 中重新创建，这会导致元素闪烁（我尝试了这些元素的组合，cache但repeat都没有改变行为）。

相反，我想重新使用已经创建的 DOM 并更改（或删除）包装器。

我发现在某种程度上完成这项工作的唯一方法是将条件移动到包装器元素中并移动<slot></slot>元素：

render() {
    return this.somedCondition ? html`<div><slot></slot></slot>` : html`<slot></slot>`;
}

我不喜欢这个解决方案，因为它引入了很多“无用”的包装组件。如何重用部分 DOM？

Answer 1

使用新版本的 litelement，并使用不安全的 html，元素名称可以是变量。

所以，你可以写

html`<${container}>${expensive}</${container}>`

并根据条件将容器的值设置为“lit-gallery”或“div”