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分開，這將使我的項目樹更加清晰。

四處搜尋，我發現了一些基於假設的討論，即瀏覽器將不再支持“導入” [（請參閱底部有關導入替代方法的UPDATE討論）]。 1個

基本上，這使我有兩種可能性：

1-從html導入.js文件到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 Webcomponents進行編碼的同時“獲取” html文件，該文件是否有望由支持本機Webcomponents（例如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文件。