html imports ～共通部分を外部から非同期で読み込み～

<script>(async () => document.querySelector('#foo').append(document.createRange().createContextualFragment(await (await fetch('bar.html')).text())))();</script>

ローカルで動作確認する場合は、fetchを使用しているので、
ローカルにWebサーバーを起動しないと動作確認出来ません。

Local Web Server

https://qiita.com/okhrn/items/4d3c74563154f191ba16
https://qiita.com/sudahiroshi/items/e74d61d939f18779970d
https://qiita.com/yoshi389111/items/76b37c7f54b00f686149

Synchronous XMLHttpRequest

以下だと同期で読み込み出来るのかしら...?

<script>
  const htmlImports = (selector, htmlfile, position = 'append') => {
    const request = new XMLHttpRequest();
    request.open('GET', htmlfile, false);
    request.send(null);
    if (request.status === 200) {
      if (position === 'after') document.querySelector(selector).after(document.createRange().createContextualFragment(request.responseText));
      if (position === 'append') document.querySelector(selector).append(document.createRange().createContextualFragment(request.responseText));
      if (position === 'before') document.querySelector(selector).before(document.createRange().createContextualFragment(request.responseText));
      if (position === 'prepend') document.querySelector(selector).prepend(document.createRange().createContextualFragment(request.responseText));
      console.log(`imported ${htmlfile}`);
    }
  };
  // export default htmlImports;
</script>
<script> // type="module"
  // import htmlImports from './import.js';
  htmlImports('#foo', 'bar.html');
</script>

Range

https://zenn.dev/antez/books/6da596a697aa86/viewer/4a39b4
https://uhyohyo.net/javascript/8_1.html

[Appendix]

ES Modules

https://qiita.com/ozaki25/items/9723cb3c1c72845157d5
https://kamatimaru.hatenablog.com/entry/2021/01/27/004235