Partial templates problem #4640
-
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 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
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>` |
Beta Was this translation helpful? Give feedback.
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: