0

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

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

4

2 回答 2

1

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

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

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

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

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

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

于 2021-01-20T08:13:08.917 回答
1

您写道，您将外部库直接附加到由 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)
于 2021-01-21T20:17:29.443 回答