Vanilla WebComponents 方法：“从 html 导入 js”和“从 js 获取 html”文件之间有什么真正的区别

Question

上下文：直到现在我都不介意如何将模板 html 文件导入我的香草 web 组件，因为我总是编写小的 html 代码。所以我在我的 webcomponent .js 文件上编写了 html 代码，并执行以下操作：

const template = document.createElement("template");
template.innerHTML = `<div id="firstdiv"><input id="inputAny"/></div>`;

class anyVanillaWebComponent extends HTMLElement {
...
  connectedCallback() {
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    const inputAny = this.shadowRoot.getElementById("inputAny");
...

这在教程、博客和论坛中很常见。现在我想将 html 与 javascript 分开，假设这将使我的项目树更清晰。

四处搜索我发现了一些讨论，假设浏览器将不再支持“导入”[（请参阅底部关于导入替代方案的更新讨论）]。1

基本上，这让我想到了两种可能性：

1 - 将 .js 文件从 html 导入到 html 举例：

<template id="my-webcomponent-template">
  <link rel="stylesheet" href="./some.css">
   <div>some content ...</div>
</template>
<script src="MyWebcomponent.js"></script>

2 - 从 .js 文件中异步获取 my-webcomponent.html

(async () => {
  const res = await fetch('/MyWebcomponent.html');
  const textTemplate = await res.text();
  const HTMLTemplate = new DOMParser().parseFromString(textTemplate, 'text/html')
                           .querySelector('template');

  class MyWebcomponent extends HTMLElement {...

根据 2017 年的此类讨论，我似乎应该避免使用选项 1，但我不清楚为什么以及选项 2 是否有一些真正的优势。所以我的直截了当的问题是：“在编码 Vanilla Web 组件时导入”和“获取” html 文件，该文件预计将由支持本机 Web 组件的浏览器（例如 Chrome）直接呈现？

Answer 1

如果您不打算在各种页面中使用自定义元素，那么这两种解决方案都不错。

在第一个中它可能会更快，因为您将保存一个 HTTP 请求，因为 HTML 模板在主 HTML 页面中立即可用。

但如果您打算重用自定义元素（或为了更好的代码分离），第二种解决方案会更好，因为消费者与 Web 组件是分离的。

Answer 2

您可以随时查看捆绑程序/打包程序。 Webpack 和其他人工作得很好。

我专门为 Web 组件编写了这个： https://www.npmjs.com/package/component-build-tools

它允许零个或多个模板作为真正的 HTML 文件，如果你想本地化你的组件，它还允许导入基于区域设置的字符串。

它还允许您使用 ES6 导入编写组件，然后在需要时交叉编译为 ES5，并允许输出为 ES6 模块文件、CJS 文件或简单的 IIFE 文件。