防止在 lit-html/lit-element 中重用 DOM

Question

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

我觉得lit-html 中的live() 指令应该对此有用，但是它可以防止基于给定属性的重用，即使所有属性都相同，我也想防止重用。谢谢！

Answer 1

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

您可以通过在非 Lit DOM 中添加一个新元素，然后将 that 添加到 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 组件获取的所有内容。

如果您可以获得 jQuery/Trumbowyg 的模块版本（或您的构建工具支持），您可以使用 import 添加脚本，或者您可以将 <script> 标签添加到您的组件，在 @ 添加后备加载 DOM 内容987654327@，然后在<script>的加载事件上调用$(div).trumbowyg()来初始化组件。

虽然更麻烦，工作量更大，但我推荐后者，因为这两个组件都很大，而且（感谢 jQuery 建立在现在已经 15 年的假设之上）需要同步加载（<script async 或 <script defer 不要工作）。尤其是在较慢的连接上，Lit 会在 jQuery/Trumbowyg 加载之前很久就准备好了，所以你希望 <trumbowyg-editor> 在发生这种情况时看起来不错（显示微调器、在适当的空间中布局等）。

Answer 2

您写道，您将外部库直接附加到由 lit-html 管理的元素。听起来你基本上是在这样做：

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

如果您这样做，请尝试创建自己的 div，让外部 lib 渲染到该 div，最后将该 div 附加到 lit-html：

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