1

コンテキスト: 今まで、私はいつも小さな HTML コードを書いていたので、テンプレート HTML ファイルをバニラ Web コンポーネントにインポートする方法について気にしませんでした。したがって、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

基本的に、これは私を2つの可能性に駆り立てました：

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 に実際の利点があるかどうかは明確ではありません。ネイティブ Web コンポーネント (Chrome など) をサポートするブラウザによって直接レンダリングされることが期待される Vanilla Web コンポーネントのコーディング中に html ファイルを「フェッチ」しますか?

4

2 に答える 2