Bil*_*lly 6 web-component html-templates
当您可以简单地在 Web 组件（shadowRoot.innerHTML）中定义 HTML 时，我似乎无法理解或找出为什么应该将 HTML 模板与 Web 组件一起使用。
创建模板并将其克隆到 Web 组件内有什么好处？我可以看到两个 Web 组件共享相同的 HTML 是有原因的，但除此之外我不知道。
我是否遗漏了一些根本上重要的东西？
是的，太多的博客都document.createElement("template")在.innerHTML做同样的事情……而且代码更少……而且速度更快。
请注意，模板不依赖于自定义元素 API 或 ShadowDOM。
3 种Web 组件技术中的每一种都可以单独使用。
当您想要在 HTML 文档中存储可重复使用的内容时，模板非常有用，因为它不会被解析。
在过去，我们会使用 a<div hidden>并祈祷它的内容不会影响页面的其余部分。
就像过去一样，您可以读取 Template.innerHTML 并使用String值执行任何您想要的操作。
更现代的方法是克隆模板，只需注意.content属性是必需的，并且您会得到一个Document-Fragment值作为回报。
<template id="MY-TEMPLATE">
<article>
...
</article>
</template>
document.getElementById("MY-TEMPLATE").content.cloneNode(true)
当您拥有带有shadowDOM的自定义元素时，模板非常适合定义shadowDOM 内容。
我不明白为什么这么多开发人员想要使用 HTML-in-JS 和 CSS-in-JS。
如果您有 HTML 文档，请将内容存储在那里，这样更容易编辑。
<template id="MY-ELEMENT">
<style>
/* style shadowDOM here */
</style>
<slot></slot>
</template>
您的 MY-ELEMENT 需要做的就是：
super() // or this when done in the connectedCallback
.attachShadow({mode: 'open'})
.append(document.getElementById(this.nodeName).content.cloneNode(true))
每次使用时都会解析包含 HTML 内容的 innerHTML 字符串。
模板被解析一次，因此当您多次使用同一个模板时，可以节省 CPU 周期
我个人的偏好是在 HTML 中保留<TEMPLATEs>尽可能多的 HTML（和 CSS）。仅当我希望我的组件不可配置时，我才在 JS 中使用静态.innerHTMLHTML，而不是.createElement("template")为了代码简洁而不是（次要）性能提升
仅在需要尽快加载/执行的 SDWC（自毁 Web 组件）中，我包含组件内的所有内容：
customElements.define('my-head',class extends HTMLElement{
connectedCallback(){
// generate <HEAD> content, <SCRIPTS> and <STYLE> CSS-in-JS here
this.remove();
}
});
创建模板并将其克隆到 Web 组件内有什么好处？
速度。与克隆节点相比，解析字符串并生成内部 html 对象需要一些额外的时间。如果Web组件在很多地方使用，每个地方都会解析字符串并将其转换为html对象。与仅解析一次进行比较。
| 归档时间： |
|
| 查看次数： |
2093 次 |
| 最近记录： |