2

当您可以简单地在 Web 组件 (shadowRoot.innerHTML) 中定义 HTML 时，我似乎无法理解或找出为什么应该将 HTML 模板与 Web 组件一起使用。

创建模板并将其克隆到 Web 组件中有什么好处？我可以看到如果两个 Web 组件共享相同的 HTML 是有原因的，但除此之外我不知道。

有什么我遗漏的根本重要的东西吗？

4

2 回答 2

4

是的，太多的博客都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 的自定义元素时，模板非常适合定义该 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 中尽可能多地保留 HTML（和 CSS）<TEMPLATEs>。只有当我希望我的组件不可配置时，我才会在 JS 中使用静态.innerHTMLHTML，而不是.createElement("template")因为它是一次性的 HTML 注入

只有在需要尽快加载/执行的 SDWC（自毁 Web 组件）中，我才包含组件内的所有内容：

customElements.define('my-head',class extends HTMLElement{
  connectedCallback(){
    // generate <HEAD> content, <SCRIPTS> and <STYLE> CSS-in-JS here

    this.remove();

  }
});
于 2020-11-27T15:57:01.080 回答
0

创建模板并将其克隆到 Web 组件中有什么好处？

速度。与仅克隆节点相比，解析字符串并生成内部 html 对象需要一些额外的时间。如果 Web 组件在很多地方使用，并且每个地方都会解析字符串并将其转换为 html 对象。将其与仅解析一次进行比较。

关于 Web 组件的教程

于 2020-11-29T03:46:09.380 回答