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); } })();

コメントを残す

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