HTML文書をつくる22 仮想DOM（template, slot）

　JavaScriptでHTML要素を動的につくるための要素である。

要素一覧

要素	概要
<template>	JavaScriptで利用するHTMLテンプレート。MDN
<slot>	HTMLテンプレートで使うデータの挿入口。MDN

template

<template id="tpl">
<p>これはテンプレートです。</p>
</template>
<div id="output"></div>

var tpl = document.querySelector('#tpl');
var clone = tpl.content.cloneNode(true);
clone.querySelector('p').textContent = 'テンプレートをJSで生成しました。'
document.querySelector('#output').appendChild(clone);

slot

<template id="tpl2">
<p><slot name="my-slot">これはテンプレートです。</slot></p>
</template>
<div id="output2"><span slot="my-slot">slotも含めてテンプレートをJSで生成しました。</span></div>

var clone = document.getElementById("#tpl2").content.cloneNode(true);
var output = document.getElementById("#output");
var shadow = output.attachShadow({mode: "open"});
shadow.appendChild(clone);

slotも含めてテンプレートをJSで生成しました。

所感

　JSを介さずにテンプレート生成できてほしかった。HTMLコードの可読性がどんどん悪くなる。とくにslottableな要素が限られていたり、要素としてslotを書いたり、属性としてslotを書いたりと、めちゃくちゃ紛らわしい書き方になるのが最悪。もっと簡単に書けなかったのか。どうせJSで生成せざるを得ないなら、ふつうにDOM操作でcreateElementしちゃえばいいんじゃない？　いまいち良さがわからない。つきつめると、HTML自体がクソという話に行き着く。見も蓋もない。

　slot | MDNはWebComponentと絡めて説明してあるのでムダに複雑。最初はもっと簡単にしてほしかった。なので私の記事では超簡単にした。こういうのでいいんだよ。

対象環境

• 2022-04-07
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux