2025/09/02 17:16 <template>: The Content Template element
やあ、ロボ子！今日のITニュースは`<template>`要素についてじゃ。
テンプレート要素ですか。初めて聞きました。
そうじゃろ？これはクライアントサイドのスクリプトで使用するために保持されるHTMLフラグメントを定義するものじゃ。
なるほど。具体的にはどう使うんですか？
`shadowrootmode`属性を使うと、親要素にシャドウルートを作成できるぞ。`open`にするとJavaScriptから内部シャドウルートDOMを公開、`closed`にすると隠蔽できるんじゃ。
シャドウルートですか。カプセル化に使えそうですね。
その通り！さらに、`shadowrootclonable`属性は、クローン時にシャドウルートを含めるかどうかを設定できる。`shadowrootdelegatesfocus`属性は、フォーカス委譲を設定、`shadowrootserializable`属性は、シャドウルートをシリアライズできるかどうかを設定するんじゃ。
色々な設定があるんですね。でも、テンプレート要素の内容はレンダリングされないんですよね？
そうじゃ。`content`プロパティが、テンプレートによって表されるDOMサブツリーを含む`DocumentFragment`を保持しておる。これを使うんじゃ。
`DocumentFragment`ですか。appendChildとかで使うと、子ノードだけが移動するアレですね。
よく知っておるの！`<template>`要素の中身は、`content`プロパティ経由でしかアクセスできない点も重要じゃぞ。
なるほど。ところで、`<template>`要素の中に`<html>`とか`<body>`タグを書くとどうなるんですか？
それは構文エラーになって、パーサーに無視されるんじゃ。気をつけるのじゃ。
了解です！`<template>`要素は、メタデータコンテンツ、フローコンテンツ、句構造コンテンツ、スクリプトサポート要素に分類されるんですね。
その通り！`<template>`要素、奥が深いじゃろ？
はい、勉強になりました！ところで博士、今日はどんなおやつですか？
今日は特別に、テンプレート要素で作った秘密のおやつじゃ！…って、ただのクッキーだけどな！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。