template要素を使ってみる

概要

• <template>要素は、ユーザーからは見えないHTMLコンテンツ（ドキュメントフラグメン）を保持します
• <template>要素は、何度も使いたいHTMLコードがある場合に使われます
• Jsで要素を生成するのみの処理とコード量を比較しましたが大差なかったのでどんな時に有効なのかまた調査します

背景 🖼️

業務で<template>（テンプレート）要素がpopoverに使われていたので調べてみます。

<template> テンプレート要素とは 💡

<template>要素は、ユーザーからは見えないHTMLコンテンツ（ドキュメントフラグメン）を保持します。
<template>要素内のコンテンツは、後でJavaScriptでレンダリングすることができます。
<template>要素は、何度も使いたいHTMLコードがある場合に使われます。

宣言的シャドウ DOMの役割もあるのですが、今回は触れません。

<template>要素を使ってフラグメント内の要素を使い回す 🕵️

See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.

テンプレート文字列を使って文字列から要素を生成する 🐳

See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.

最後に

• <template>要素を使ってみましたが、劇的にJavaScriptのコード量が減っている印象は受けませんでした
• 使いどきについてはまた調べたいと思います

参考 ✨