防止在lit-html/lit-元素中重用DOM

Question

我正在寻找一种不在lit-html/lit-element中重用DOM元素的方法（是的，我知道，我正在关闭一个主要特性）。特定场景是将现有系统移动到lit元素/lit html，该元素在某些点嵌入trumbowyg所见即所得编辑器。此编辑器将自身附加到

我觉得lit html中的live（）指令对此应该很有用，但它可以防止基于给定属性的重用，并且我希望防止重用，即使所有属性都相同。谢谢




Answer 1

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

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

如果您是这样做的，请尝试创建自己的div，让外部库呈现到该div，最后将该div附加到lit html：

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

Answer 2

我在富文本编辑器和可内容的代码中也遇到过类似的问题——由于模板如何更新DOM，你不希望它成为模板的一部分。

为此，您可以使用non-Lit 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不会触及它，您可以执行以下操作：

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

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

如果您可以获得jQuery/Trumbow yg的模块版本（或者您的构建工具支持它），或者您可以添加

虽然更混乱和更多的工作，我推荐后者，因为两个组件都很大，并且（由于jQuery是建立在15年前的假设之上的）需要同步加载（