メイラボ開発者ブログ

株式会社メイラボのエンジニアブログ

Web Components > HTML Templatesについて

f:id:soraxism:20190313222539j:plain

こんにちは。メイラボのフロントエンドエンジニアの空です。
4回に渡ってお送りしているWeb Componentsについて。
最終回の第4回目はHTML Templatesについてのお話です。

前回の記事
blog.meilabo.com

HTML Templatesとは

<template>要素内に既存のHTML要素やスタイル、スクリプトを含めることによって、独自のDOM要素をテンプレートとして定義することが可能です。

また<template>要素は、ページロード時には内部の要素をレンダリングしないという特徴を持っています。
JavaScriptから利用されて初めてレンダリングが行われるので、<img>要素などを内包する場合でもページロードの妨げにならないというメリットがあります。

テンプレートの定義方法

<template>要素は画面上には表示されない仕様となっているため、レンダリング後のShadow DOMツリーの構造を<template>要素内に記述し、JavaScript側でその内容を取得して利用します。

完成図として、以下のようなボタンを生成するテンプレートを作成してみます。

f:id:soraxism:20190313232828p:plain:w300

テンプレートの準備

<template id="btn-template">
  <style>
  :host(.btn) {
    text-align: center;
  }

  .btn {
    display: inline-block;
    border: none;
    font-size: 16px;
    padding: 1em;
    border-radius: 2px;
    width: 150px;
    background: #03A9F4;
    color: #fff;
  }
  </style>

  <button class="btn">
    <slot name="btn-text"></slot>
  </button>
</template>

HTML要素の記述

<div class="wrapper">
  <!-- ボタンのテキスト -->  
  <span slot="btn-text">Primary</span>
</div>

JavaScriptの記述

let host   = document.querySelector('.btn');
// Shadow Rootを生成
let shadow = host.attachShadow({mode: 'open'});

// テンプレートの取得
let template = document.querySelector('#btn-template');
let btn = document.importNode(template.content, true);

// Shadow Rootへ追加
shadow.appendChild(btn);

まとめ

HTML Templatesを利用することで、HTML側にあらかじめテンプレートを用意しておき、JavaScriptで利用することができました。
JavaScript側で要素を生成する必要がなく、HTMLを見れば構造がひと目でわかるので、保守性があがるのではないかと思います。

Web Compornentsについての総まとめ

4回に渡りお話してきたWeb Componentsについてですが、まだまだ仕様策定が固まりきれてない面もあり、本格的に導入は難しいかもしれませんが、やはり今後も楽しみな技術であることは間違いないかと思います。

これを読んでいただいたみなさんも、機会があればぜひ試していただきたいと思います。

参考サイト