More Related Content
Similar to Polymerで先取り☆Web Components (7)
Polymerで先取り☆Web Components
- 10. Web Componentsとは
• Web Componentsは現在、W3Cの草案と
なっている(2013年6月時点)
– W3Cの勧告プロセス
1. 草案(Working Draft) ← イマココ
2. 最終草案(Last Call Working Draft)
3. 勧告候補(Candidate Recommendation)
4. 勧告案(Proposed Recommendation)
5. W3C勧告(Recommendation)
9
- 15. Polymerの紹介
<!-- 1. カスタムタグの定義 -->
<element name=“my-cmp"
attributes="owner color">
<!-- 2. コンポーネントの定義 -->
<template>
<style>
b { font-size: 3em; }
</style>
{{owner}}の好きな色は<b>{{color}}</b>で
す。
</template>
<script>
Polymer.register(this, {
color: "red",
owner: "Daniel"
});
</script>
</element> 14
<!DOCTYPE html>
<html>
<head>
<!-- 1. polymer.jsを読み込む -->
<script src=”js/polymer.js"></script>
<!-- 2. コンポーネントを読み込む-
->
<link rel="import"
href=”myComponent.html”>
</head>
<body>
<!-- 3. カスタムタグを使用する -->
<my-cmp owner="Scott"
color="blue”></my-cmp><br />
<b>ここはスタイル適用されない
</b>
</body>
</html>
コンポーネントを読み込む側のHTML コンポーネントを定義する側のHTML
- 19. 参考リンク
• Web Components普及の夜明け!?Polymer.jsを試し
てみた。 | OpenWeb
– http://openweb.co.jp/2013/05/17/web-
components%E6%99%AE%E5%8F%8A%E3%81%A
E%E5%A4%9C%E6%98%8E%E3%81%91%EF%BC
%81%EF%BC%9Fpolymer-
js%E3%82%92%E8%A9%A6%E3%81%97%E3%81
%A6%E3%81%BF%E3%81%9F%E3%80%82/
• Polymer と Web Components - steps to phantasien
– http://steps.dodgson.org/b/2013/05/19/polymer-and-
web-components/
18