如何将HTML模板与javascript Web组件结合使用

Question

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

使用.htmlweb组件，可以执行以下操作：

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的推荐方法是什么呢？

我使用的是香草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));

在许多用例中，解析后的模板几乎没有被re-使用，这是一种昂贵的编写方式：

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

请注意附加模板方法也有(潜在的((边缘情况(缺点
其内容是异步解析的，而.innerHTML=是同步的。

当你在做这件事的时候，一定要了解其中的区别：

• https://developer.mozilla.org/en-US/docs/Web/API/Element/append(不支持IE(
• https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild