如何在polymer 3组件中实现轻html而不是多汁的html？

我正在将一个应用程序从聚合物1转换为聚合物3。我使用了多汁的html，但它们还没有更新到Polymer 3，我看到有点燃的html。我想知道如何将此代码段更改为使用lit-html。它用于扩展字符串，如：

“Hello world！”

下面是我的polymer 1组件的代码片段

<template is="dom-repeat" items="[[item.snippets]]">
  <template is="dom-repeat" items="[[item.matches]]">
    <div><template is="juicy-html" content$="[[item.text]]"></template></div>
  </template>
</template>



我是否需要为内部div实现一个新组件？我可以看一个例子吗

以下是生成的Polymer 3元素，用于在字符串中显示高亮显示的文本：

从'@polymer/lit-element/lit-element.js'导入{html，LitElement}

/**
 * `search-snippet-highlight`
 * 
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */
class SearchSnippetHighlight extends LitElement {

  static get properties() {
    return {
      snippet: { type: String }
    };
  }

  render() {
    return html`
      <style>.highlight { background-color: yellow; }</style>
      <div .innerHTML="${this.sanitizeHtml(this.snippet)}"></div>`;
  }

  sanitizeHtml(input) {
    return input; // TODO: actually sanitize input with sanitize-html library
  }

}

window.customElements.define('search-snippet-highlight', SearchSnippetHighlight);

/**
*`搜索片段突出显示`
* 
*
*@customElement
*@聚合物
*@demo/index.html
*/
类SearchSnippetHighlight扩展了LitElement{
静态获取属性（）{
返回{
代码段：{type:String}
};
}
render（）{
返回html`
.突出显示{背景色：黄色；}
`;
}
sanitizeHtml（输入）{
return input；//TODO:使用sanitize html库实际清理输入
}
}
定义（'search-snippet-highlight'，SearchSnippetHighlight）；
与Polymer's中的
多汁html

（推荐使用

lit html

的基本元素）相当的是：

---

我把它放在一个答案中，因为@tony19建议它可以正确格式化。我不是在问一个单独的问题，我只是在问一个修辞问题，而不是提供一个单独的解决方案

您可以简化该方法，因为lit允许您通过

map

函数分层构建html

render() {    
    return html`
        <div>${this.item.snippets.map(s => s.matches.map(m => 
                html`<div>${this.sanitizeHtml(m.text)}</div>`
            ))}
       </div>
    `; 
}

这确实需要您对如何更新

此.item.snippets

和基础

匹配项

施加一些约束。您必须确保在更新时使用的“数组”引用发生更改。类似这样的内容（假设正在使用新的匹配项更新匹配项），

sindex

是要更新的

snippet

的索引，

mindex

是正在使用

newMatch

更新的

snippet中的
匹配项的索引

this.items.snippets = this.items.snippets.map((snippet, index) => index === sindex ?
   {...snippet, matches: snippet.matches.map((match, index) => index === mindex ?
      newMatch : match)} : snippet);

谢谢你，托尼！这对我很有帮助，现在我有了一个搜索片段元素来显示与查询文本匹配的文本。@LorenCahlander没问题：）为什么渲染不返回```为什么渲染不返回``html
${this.sanitizeHtml（content}}
``或者更好的是``html
${this.item.snippets.map（s=>s.matches.map（m=>html
${this.sanitizeHtml>$}}{（m.text）}
）}
``无法编辑上一条注释。后面的这条注释与stackoverflows混淆editor@akc42作为一个新问题提问可能是一个好主意，适当的格式可以帮助澄清问题，允许其他人提供您可能觉得有用的答案。
render() {    
    return html`
        <div>${guard(this.item.snippets, () => this.item.snippets.map(s => 
                 guard(s.matches, () => s.matches.map(m => 
                html`<div>${this.sanitizeHtml(m.text)}</div>`
            ))))}
       </div>
    `; 
}

this.items.snippets = this.items.snippets.map((snippet, index) => index === sindex ?
   {...snippet, matches: snippet.matches.map((match, index) => index === mindex ?
      newMatch : match)} : snippet);