如何将 HTML 模板与 javascript Web 组件一起使用

Question

HTML 模板既好又快。问题是 HTML 导入已被弃用。这意味着将每个 Web 组件放在它们自己的 .js 文件而不是 .html 文件中是最有意义的。但是，如果使用 .js 文件，那么据我所知，不能使用预编译模板附加到阴影 DOM，必须使用我想象的每次解析的固定字符串.

使用 .html 网络组件可以做到：

    shadowRoot.appendChild(myTemplate.content.cloneNode(true));

但是在 .js 文件中，您必须执行如下操作：

something.innerHTML = `
  <style>
   
    ...
    /* lots of style */
  </style>
  <b>I'm in shadow dom!</b>
  <!-- lots of html -->
  <slot></slot>
`;

这不是一个坏主意吗，因为每次都必须重新评估文本，而模板只评估一次？

那么在 Web 组件的 .js 文件中嵌入自己的样式和 html 的推荐方法是什么？

我使用的是 vanilla JS，没有框架。

Answer 1

+1 对于 Vanilla 代码，您的代码将再使用 26 JavaScript 年。

没有推荐的方法，这完全取决于您的使用情况。

你可以把<template id="MY-COMPONENT">放在你的主HTML文件里，
并在您的组件代码中执行 document.getElementById("MY-COMPONENT").content.cloneNode(true)（知道您的 DOM 何时准备就绪）
你可以做到document.createElement("template")，然后从那里开始
您可以使用 <load-file> Web 组件加载外部 HTML 文件。
（这里没有模板优势）

所以这一切都归结为了解您的应用程序需要什么。

请注意，您在许多博客中看到的模式：

 let template = document.createElement("template");
 template.innerHTML = ` CSS & HTML CONTENT `;

 ...

 this.shadowRoot.appendChild(template..content.cloneNode(true));

在许多用例中，很难重新使用使用已解析的模板，这是一种昂贵的编写方式：

  this.shadowRoot.innerHTML = ` CSS & HTML CONTENT `;

请注意 附加模板 方法也有（潜在的）（边缘情况）缺点；
它的内容被解析为 async，而 .innerHTML= 是同步的。

当你在做的时候，一定要了解差异：

如何将 HTML 模板与 javascript Web 组件一起使用

How to use HTML templates with javascript Web component

javascript

html

web-component

native-web-component