Partial templates problem

[ivan-suhorukov]

Hello! I need help with lit templates... In my code i need a logic when lit templates alternates with some options... like this:

render() {
   return html`<active-form
      .content={[  // array of content
         html`<div class="container">`,           // - start part of template
         ActiveForm.field('name', 'Label').textInput(),    // returns some config object
         html`</div>`                             // - end part of template
      ]}>
   </active-form>`
}

Inside active form i render TemplateResults as it is, and render config objects with some processing. But that does not work because, as i see, html directive completing templates, so this expression: html'<div class="container">' becomes closed <div class="container"></div> automaticaly. And it breaks markup of form content. Is there a way to "join" partial templates or something else what could help? Thank you!

[justinfagnani]

Templates must be well-formed, meaning here that the tags have to be balanced: you can't have opening tags in one template and the associated closed tags in another. This is because each tempalte is parsed by the browser's HTML parser separately, and the browser will close unclosed tags.

You need to use a single template with a hole in it for the other content. You could use a function to fill the hole:

(content) => html`<div class="container">${content}</div>`

[ivan-suhorukov]

Ok, I see that, thanks. I will try to resolve that this way.