防止lit/lit元素中的DOM重用

Question

我正在寻找一种方法，以避免在lit/lit元素中重用DOM元素(是的，我知道，我正在关闭其中一个主要特性)。特别的场景是将现有的系统移动到lit/lit，它在某些时候嵌入trumbowyg编辑器。这个编辑器将自己附加到lit元素中生成的<div>标记上，并修改自己的内部DOM，但是lit当然不知道这已经发生了，所以它通常会重用相同的<div>标记，而不是创建新的DOM。我正在寻找类似于vue.js键属性的东西(例如，preventing Vue from aggresively reusing dom-elements)。

我觉得live()指令在lit-html中应该是有用的，但是这样可以防止基于给定属性的重用，而且即使所有属性是相同的，我也希望防止重用。谢谢!

Answer 1

对于富文本编辑器和contenteditable，我也遇到过类似的问题--由于模板是如何更新DOM的，所以您不希望它成为模板的一部分。

要做到这一点，可以使用非发光DOM添加一个新元素，然后将它添加到Lit管理的DOM中：

class TrumbowygEditor
  extends HTMLElement {

  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const div = document.createElement('div');
    shadow.appendChild(div);
    
    const style = document.createElement('style');
    // Add CSS required 
    shadow.appendChild(style);

    $(div).trumbowyg(); //init
  }
}

customElements.define('trumbowyg-editor', TrumbowygEditor);

由于这是在自定义元素的阴影中运行的，DOM Lit不会碰它，所以您可以这样做：

html`
    <div>Lit managed DOM</div>
    <trumbowyg-editor></trumbowyg-editor>`;

但是，您必须在TrumbowygEditor上实现属性和事件，以添加要传递或从嵌套的jQuery组件获得的所有内容。

如果您可以获得jQuery/Trumbowyg的模块版本(或者您的构建工具支持它)，或者您可以向组件中添加<script>标记，在constructor中添加加载DOM内容的回退操作，然后在<script>的load事件中调用$(div).trumbowyg()来插入组件，则可以使用constructor添加脚本。

虽然更复杂更多的工作，但我建议后者，因为这两个组件都很大，而且(由于jQuery构建在已有15年历史的假设基础上)需要同步加载(<script async或<script defer不工作)。尤其是在较慢的连接上，在jQuery/Trumbowyg加载之前很久就已经准备好了，所以您希望<trumbowyg-editor>看起来很好(显示旋转器，在适当的空间布局等等)。

Answer 2

您可以将外部库直接附加到lit管理的元素。听起来你实际上是这样做的：

render(html`<section><div id=target></div></section>`, document.body)
external_lib.render_to(document.querySelector("#target"))

如果这是您所做的，那么尝试创建您自己的div，让外部lib呈现到该div，最后将该div附加到lit：

let target_div = document.createElement('div')
render(html`<section>${div}</section>`, document.body)
external_lib.render_to(target_div)

Answer 3

对这个问题最最新的答案是使用Lit的内置keyed指令。这个场景正是它的目的：

https://lit.dev/docs/templates/directives/#keyed

关联具有唯一键的可呈现值。当键发生更改时，就会在呈现下一个值之前删除和释放之前的DOM，即使值--例如模板--是相同的。

@customElement('my-element')
class MyElement extends LitElement {

  @property()
  userId: string = '';

  render() {
    return html`
      <div>
        ${keyed(this.userId, html`<user-card .userId=${this.userId}></user-card>`)}
      </div>`;
  }
}