thanks for the article, discovered about lit-html now!
curious to know why markup is created in JavaScript instead of HTML.
.... <!-- other markup --><li><divclass="card"><divclass="card-content"><divclass="content"><divclass="name">${hero.name}</div><divclass="description">${hero.description}</div></div></div></div></li>
.... <!-- other markup -->
then call this in JavaScript (with data) for dynamic rendering. given that there may be several dynamic components in a page that could help in code readability.
One reason is that those ${...} expressions are part of JavaScript, you can't just put that in HTML and have them do anything.
Another is that we don't have a great way of co-locating HTML and JavaScript right now. You could put HTML templates in the main document and your component in JS, but that's a pretty bad developer experience, and it would be tough-to-impossible to scale to 3rd party components.
And most importantly is that lit-html doesn't have any of its own control-flow constructs. It has no if-statements or loops - that's all left up to JavaScript. We'd have to re-implement these for HTML.
Hopefully soon we'll have HTML modules in the browser and then we can do something like this.
thanks for the article, discovered about lit-html now!
curious to know why markup is created in
JavaScript
instead ofHTML
.then call this in
JavaScript
(with data) for dynamic rendering. given that there may be several dynamic components in a page that could help in code readability.One reason is that those
${...}
expressions are part of JavaScript, you can't just put that in HTML and have them do anything.Another is that we don't have a great way of co-locating HTML and JavaScript right now. You could put HTML templates in the main document and your component in JS, but that's a pretty bad developer experience, and it would be tough-to-impossible to scale to 3rd party components.
And most importantly is that lit-html doesn't have any of its own control-flow constructs. It has no if-statements or loops - that's all left up to JavaScript. We'd have to re-implement these for HTML.
Hopefully soon we'll have HTML modules in the browser and then we can do something like this.
Thanks for contributing to the conversation!
thanks for the reply, Justin!