1

背景：到目前为止，我并不介意如何将模板 html 文件导入我的 vanilla webcomponent，因为我总是编写小的 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）直接呈现？

4

2 回答 2

2

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

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

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

于 2019-08-06T17:57:59.173 回答
2

您可以随时查看捆绑程序/打包程序。Webpack和其他的运行良好。

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

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

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

于 2019-08-06T21:58:05.960 回答