![#index.html
<html>
<body>
<link rel=“import” href=“./import.html”>
</body>
<script>
var link = document.querySelector(“link[rel=‘import’]”);
var template = link.import.querySelector(“template”);
var clone = document.importNode(template.content, true);
document.body.appendChild(clone);
</script>
</html>
#import.html
<template>
<h1>Sample!</h1>
</template>](https://image.slidesharecdn.com/random-150822060231-lva1-app6891/85/WebComponents-Polymer-8-320.jpg)
奥别产颁辞尘辫辞苍别苍迟蝉と笔辞濒测尘别谤
- 2. ? 牧 昂拡 @tk_0225 ? 株式会社グラッドキューブに勤務 ? Webサイト解析ASP「SiTest」の開発エンジニア 自己紹介
- 3. WebComponentsとは？ ? HTML+JS+CSSをComponent化する仕組み ? 共通部品を切り出すことで再利用生を向上 ? 外部に干渉しないスコープが作れる? ?→ カプセル化することが出来る
- 5. template要素 ? テンプレート（雛形）を定義できる ? <template>要素を使用 ? コンテンツはアクティベートされるまで? テンプレート内のコードは一切評価されない ? document.importNode() →? document.body.appendChild()でアクティベート ? 既にHTML5の仕様として一部ブラウザで実装されている
- 6. <html> <body> <template id=“mytemplate”> <img src=/tk_0225/webcomponentspolymer/“”> </template> <script> var t = document.querySelector(“#mytemplate”); t.content.querySelector(“img”).src = “logo.png”; var clone = document.importNode(t.content, true); document.body.appendChild(clone); </script> </body> </html>
- 7. HTML Imports ? 外部のHTMLファイルをインポートすることが出来る ? <link rel=“import” href=“{{ImportFilePath}}”> ? importの呼び出しは一度きり? ?→ 依存性管理が楽 ? import内のスクリプトは順次実行するが? メインコンテンツの描画はブロックしない
- 8. #index.html <html> <body> <link rel=“import” href=“./import.html”> </body> <script> var link = document.querySelector(“link[rel=‘import’]”); var template = link.import.querySelector(“template”); var clone = document.importNode(template.content, true); document.body.appendChild(clone); </script> </html> #import.html <template> <h1>Sample!</h1> </template>
- 9. Shadow DOM ? DOMツリーをカプセル化することが出来る ? ShadowDOMを使用すると、? 中の要素はShadowRootに関連付けされる ? 要素の中身（ShadowHost）は見えなくなり、? 代わりにShadowRootの中が見えるようになる
- 10. <section id=“section”> <h3>ShadowDOM</h3> </section> <script> var root = document .querySelector(“#section”) .createShadowRoot();? root.innerHTML = “<style>h3 { color: red; } </style><h3>ShadowDOM</h3>”; </script>
- 11. Custom Elements ? 任意の名前の要素を作成することが出来る ? 要素名の命名規則として必ず「-」を含める必要がある ? ネイティブ要素を拡張（継承）することが出来る? （拡張CustomElements）
- 12. <template> <style> p { color: red; } </style> <p>I am Shadow DOM!</p> </template> <script> var proto = Object.create(HTMLElement.prototype, { createdCallback: function(){ var t = document.querySelector(“template”); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); } }); document.registerElement(“sample-template”, { prototype: proto }); </script>
- 13. Polymerとは？ ? Google I/Oでv1.0が発表（最近v1.1出ました） ? WebComponentsのラッパーライブラリ ? https://github.com/Polymer/polymer ? WebComponentsの簡略化と機能の強化
- 19. Fe - IronElements ? Polymerの中核を担うコアコンポーネント ? 多くのコンポーネントがIronElementsに依存している ? データの通信や入力などを担っている
- 20. Md - PaperElements ? UIコンポーネント ? Material DesignがUIに適用されている ? ボタンやタブ、スライダーなど色々 っている
- 21. Go - GoogleWebComponents ? その名の通り、GoogleのWebComponents ? GoogleAnalyticsからChartやCalendar、? Sign inまでなんでもござれ ? Googleのサービスはだいたいこれでなんとかなる
- 22. Au - GoldElements ? Eコマースのコンポーネント ? email, phone, zip, cvc(credit)などの? inputコンポーネント ? 簡易的なバリデーションも付いている
- 23. Ne - NeonElements ? WebAnimationを提供するコンポーネント ? 現在はneon-animationのみ提供している
- 24. Pt - PlatinumElements ? プッシュ通知やリソースキャッシュのコンポーネント ? 現在はplatinum-push-messagingと? platinum-swの2つが提供されている
- 25. Mo - Molecules ? サードパーティ製ライブラリのラッパー ? 現在はmarked-elementのみが提供されている ? marked-element? https://github.com/chjj/marked のラッパー? Markdownのパーサ?コンパイラ
- 27. ご静聴ありがとうございました