Javascript 跳过与嵌入元素相邻的特定模板标记的模板数组

我有一系列模板：

生成数组的代码：

generate_cell_collection() {

        const templates = this.matrix_data.map((item, index) => {
          var template_frag = [];
          var row = Math.floor(index / this.nrow);
          var col = index % this.ncol;
          var row_length = Math.floor(this.matrix_data.length / this.nrow);
          var cell_indices = '(' + row + ',' + col + ')';
          var updated = false;

          this.cell_collection.set(cell_indices, this.matrix_data[row * row_length + col]);

          if (col === 0) { template_frag.push(html`<tr>`); }

          template_frag.push(html`<cell-display .cell_indices=${cell_indices}
                                                .cell_value=${this.matrix_data[row * row_length + col]}
                                                updated=${updated}></cell-display>`);

          if (col === this.ncol - 1) { template_frag.push(html`</tr>`); }
          return template_frag;

            }).flat();

        return templates;

       }


    render() {

      var templates = this.generate_cell_collection();

      return html`
        <div id=${this.descriptor}>
        <table>
        <tbody>
        ${templates}
        </tbody>
        </table>
    </div>
    `;
    }

generate_cell_collection（）{
const templates=this.matrix\u data.map（（项目，索引）=>{
var模板_frag=[]；
var row=数学地板（索引/this.nrow）；
var col=索引%this.ncol；
var row_length=Math.floor（this.matrix_data.length/this.nrow）；
变量单元格指数='（'+行+'，'+列+）'；
var=false；
this.cell_collection.set（cell_索引，this.matrix_数据[行*行长度+列]）；
if（col==0）{template_frag.push（html``）；}
模板推送（html``）；
如果（col==this.ncol-1）{template\u frag.push（html``）；}
返回模板；
}).flat（）；
返回模板；
}
render（）{
var templates=this.generate_cell_collection（）；
返回html`
${templates}
`;
}

以及嵌入式元件的代码：

export class CellDisplay extends LitElement {

  static get properties() {
      return {
        cell_indices: { type: String },
        cell_value: { type: Number },
        updated: { type: Boolean}
      }
  }

  constructor() {
    super();
  }

  render() {
  return html`
          <td><div id=${this.cell_indices}></div>${this.cell_value}</td>`;

  }

}

导出类CellDisplay扩展了LitElement{
静态获取属性（）{
返回{
单元格索引：{type:String}，
单元格值：{type:Number}，
更新：{type:Boolean}
}
}
构造函数（）{
超级（）；
}
render（）{
返回html`
${this.cell_value}`；
}
}

但是，在呈现模板时，包含

标记的模板始终不会与插入的附加注释合并

我试图逐步通过调试器来确定其基础，但没有成功。如有任何关于原因的建议，将不胜感激

谢谢。

这是无效的：

html`<tr>`

html``

lit html模板是独立解析的，这意味着它们必须格式良好，才能按预期运行。如果您只打开一个标记，那么解析器将关闭它

相反，你需要写：

html`${somethingHere}`