この記事では、<template> と <slot> 要素を使用して柔軟なテンプレートを作成し、それをウェブコンポーネントのシャドウ DOM を表示するために使用する方法について説明します。 ウェブページで同じマークアップ構造を繰り返し再利用する必要がある場合、同じ構造を何度も繰り返すよりも、何らかのテンプレートを使用する方が理にかなっています。 これは以前から可能でしたが、HTML の <template> 要素によって、かなり容易になりました(最近のブラウザーはよく対応しています)。 この要素とその内容は DOM 内で描画されませんが、JavaScript を使って参照することは可能です。 簡単な例を見てみましょう。