HTML 模板与在 Web 组件中定义 HTML

Question

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

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

我是否遗漏了一些基本的重要信息？

Answer 1

是的，太多的博客 document.createElement("template") 而 .innerHTML 会做同样的事情......而且代码更少......而且速度更快。

请注意，模板未绑定到自定义元素 API 或 shadowDOM。
3 种 Web 组件 技术中的每一种都可以单独使用。

模板

当您想在 HTML 文档中存储可重复使用的内容时，模板非常有用，因为它不会被解析。

过去我们会使用 <div hidden> 并祈祷其内容不会影响页面的其余部分。

就像过去一样，您可以阅读 Template.innerHTML 并使用 String 值做任何您想做的事情。

更现代的方法是克隆模板，请注意 .content 属性是必需的，并且您会得到一个 Document-Fragment 值return.

<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的内部HTML字符串每次使用都会被解析。

一个模板只解析一次，因此可以节省 CPU 个周期，当您多次使用同一个模板时
但如前所述，大多数博客只使用一次模板。

用法

我个人的偏好是在 HTML 中尽可能多地在 <TEMPLATEs> 中保留 HTML（和 CSS）。只有当我希望我的组件不可配置时，我才在 JS 中使用 static HTML，使用 .innerHTML，而不是 .createElement("template")，因为它是一个 -仅时间注入 HTML

只有在需要 load/execute 尽快完成的 SDWC（自毁 Web 组件）中，我才将所有内容包含在组件中：

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

    this.remove();

  }
});

Answer 2

What is the benefit of creating a template and cloning it inside the web component?

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

tutorial about web components

HTML 模板与在 Web 组件中定义 HTML

HTML Template vs defining HTML inside web component

web-component

html-templates

模板

模板和 shadowDOM

性能

用法