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

Question

我有一系列模板：

生成数组的代码：

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>
    `;

和嵌入元素的代码：

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>`;

然而，在渲染模板时，包含</tr>标签的模板始终未合并，而是插入了附加注释。

Template Rendering

我已尝试逐步调试程序，以找出实现此目标的依据，但没有成功。关于为什么的任何建议将不胜感激。

谢谢。