HTML Templates と Shadow DOM を試してみる

HTML Templates は HTML のテンプレートを定義するための要素。今までも JavaScript でテンプレートを使えるライブラリなどはあったのだけれど、それを HTML として定義できるよう標準化されたものらしい。

Shadow DOM では HTML CSS JavaScript をカプセル化してドキュメントツリーから独立した要素を作成できる。CSS も Script も完全に隔離できるので、コンポーネントとして余計な干渉を受けず与えずスマートなデザインが可能になる。いまのところ Chrome でしか使えないけれど。

下のボタンを押すと template 要素から HTML を生成する。Chrome で見ると既存の DOM ツリーから独立した HTML と CSS の追加がされるのが確認できる(デベロッパーツールで見るとデフォルトでは見えないので設定の Show Shadow DOM にチェックを入れると見えるようになる)。




HTML

<template>
<style>
h1 {
margin-top: 30px;
color: #F00;
}
</style>
<h1></h1>
<p></p>
</template>
<input type="text" id="template-hdg" value=""><br>
<textarea id="template-sts"></textarea><br>
<button id="add-content">HTML Templates を使って要素を追加</button>
<div id="template-put"></div>

JavaScript

(function() {
document.querySelector('#add-content').addEventListener('click', addContent);
var template = document.querySelector('#template').content;
var put = document.querySelector('#template-put');
function addContent() {
var clone = template.cloneNode(true);
clone.querySelector('h1').textContent = document.querySelector('#template-hdg').value;
clone.querySelector('p').textContent = document.querySelector('#template-sts').value;
if( put.createShadowRoot ) {
var shadowElm = put.createShadowRoot();
} else if( put.webkitCreateShadowRoot ) {
var shadowElm = put.webkitCreateShadowRoot();
} else {
shadowElm = put;
}
shadowElm.appendChild(clone);
}
})();

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください