WebComponentsが気になる

2013/06/16 06:04

WebComponentsとは

WebのUIをコンポーネント化したものです。
最近Google I/Oでpolymerの発表がありWebComponentsに対する興味が一挙に高まりました。

構成
  • テンプレート
  • デコレータ
  • カスタム要素
  • シャドウDOM
  • インポート

今回はさわりをやってみたいと思います。

テンプレートの作成

まずはテンプレート(コンポーネント)の部分です。

<head>
<template id="commentTemplate">
    <div>
        <img src="">
        <div class="comment-text">
    </div>
</template>
</head>

headにtemplate要素を記述しこれをコンポーネントとして使用します。

テンプレートを使う部品作成

テンプレートとして使用したいノードを取得します。
取得したノードをcloneNodeで複製し使用します。

function addComment(imageUrl, text) {
  var t = document.getElementById("commentTemplate");
  var comment = t.content.cloneNode(true);
  // Populate content.
  comment.querySelector('img').src = "/img/" + imageUrl;
  comment.querySelector('.comment-text').textContent = text;
  document.body.appendChild(comment);
}

実行結果

使うときはこんな感じです。

window.onload = function () {
  addComment("ruby-logo.png","ruby-logo");
  addComment("HTML5-logo.png","HTML5-logo");
}

実際動かしてみます。

動かしてみると同じコンポーネントで部分的に変更して表示されます。

最後に

とりあえず今回はテンプレートのみ紹介しました。
デコレータとかカスタム属性とかやろうと思いましたがインターネットにある情報をそのままやってもうまく行きませんでした。

うまくいかなかったコードは以下です。

<style>
.cake {
  decorator: url(#cream);
}
</style>
<decorator id="cream">
  <template>
    <div>@@@</div>
    <content></content>
    <div>@@@</div>
  </template>
</decorator>
<div class="cake">
  <p>*********</p>
</div>

予定では

@@@*********@@@

と表示される予定でした。
何がいけなかったんだろう?

参考