英文:
Why use the <template> in WebComponent?
问题
我看到很多 Web 组件的示例，每个人都使用模板标签来绘制界面。是否有使用模板标签而不是像 <div> 或 <section> 这样的标签的原因？
这是示例代码：
#render()
{
if (!this.#template_node) this.#template_node = this.#get_default_template();
this.shadowRoot.appendChild(this.#template_node.content.cloneNode(true));
}
#get_default_template()
{
const template = document.createElement("template");
template.innerHTML = `<p>测试 Web 组件</p>`;
return template;
}
英文:
I saw many examples of web components and everyone used template tags to draw screens. Is there a reason to use template tags instead of tags like <div> or <section>?
this is sample code
#render()
{
if (!this.#template_node) this.#template_node = this.#get_default_template();
this.shadowRoot.appendChild(this.#template_node.content.cloneNode(true));
}
#get_default_template()
{
const template = document.createElement("template");
template.innerHTML = `<p>Test Webcomponent</p>`
return template;
}
答案1
得分: 1
根据我的理解，模板元素不会与页面的其余部分一起渲染，但它们的内容可以在稍后使用JavaScript进行克隆和/或添加。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
英文:
As I understand it, template elements aren't rendered with the rest of the page, but their contents is available for cloning and/or adding later with js. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论