Polymer, A Web Component Polyfill Library
1 like836 views
This document introduces key concepts about Web Components including Custom Elements, Templates, Shadow DOM, and HTML Imports. It explains how to define custom elements using the Custom Elements API and register them, how to use templates to populate elements, and how Shadow DOM works to encapsulate styles. Polymer is introduced as a library that makes it easier to build Web Components by providing additional capabilities like data binding and gestures beyond the core Web Components specs.
Polymer, A Web Component Polyfill Library
- 1. Maeda Naohito Welcome to the future. polymer 2014/9/25
- 2. polymer? polymer elements ᵓ⠏䛥䜜䛯䠄UI/㠀UI䠅䜶䝺䝯䞁䝖㒆 polymer.js Web Components䜢౽䛻䛖䝷䜲䝤䝷䝸 platform.js Web Components䛾polyfill Web Components Webᶆ‽
- 3. Web Components? W3C䛷⟇ᐃ୰䛾䠐䛴䛾Webᶆ‽䛾䝁䝺䜽䝅䝵䞁 Custom Elements HTML Import Templates Shadow DOM
- 4. 䛺䛻䛜䛷䛝䜛䛾?
- 5. Web䛾(UI)㒊ရ䜢䝁䞁䝫䞊䝛䞁䝖䛷䛝䜛 <google-map lat=’122’ lng=’23’></google-map> <tweet-button></tweet-button> <qr-code text=”hoge”></qr-code> <mini-dora color=”yellow”></mini-dora>
- 6. kwsk
- 7. Custom Elements 䜹䝇䝍䝮せ⣲䜢ᐃ⩏ var XElemProto = Object.create(HTMLElement.prototype); var XElement = document.registerElement('x-element', { prototype: XElemProto }); registerElement()䛷Ⓩ㘓䚹 prototype䜢Ώ䛩䚹 䝝䜲䝣䞁䛿ᚲ㡲䚹
- 8. Custom Elements 䜹䝇䝍䝮せ⣲䛻䝥䝻䝟䝔䜱䞉䝯䝋䝑䝗䜢ᐃ⩏ var XElemProto = Object.create(HTMLElement.prototype); XElemProto.foo = function() {…}; Object.defineProperty(XElemProto, "bar", {value:5}); var XElement = document.registerElement('x-element', { prototype: XElemProto })䠗 foo䝯䝋䝑䝗䜢ᐃ⩏ bar䝥䝻䝟䝔䜱䜢ᐃ⩏
- 9. Custom Elements 䜹䝇䝍䝮せ⣲䛾䝷䜲䝣䝃䜲䜽䝹䝁䞊䝹䝞䝑䜽 var XElemProto = Object.create(HTMLElement.prototype); XElemProto.foo = function() {…}; XElemProto.createdCallback = function() { this.innerHTML = "<p>䜋䛢䜋䛢</p>"; 䜹䝇䝍䝮せ⣲䛾䜲䞁䝇䝍䞁䝇䛜స䜙 䜜䛯䛸䛝䛻䜀䜜䜛䝁䞊䝹䝞䝑䜽䚹 せ⣲䛻HTML䜢㏣ຍ䚹 }; Object.defineProperty(XElemProto, "bar", {value:5}); ....
- 10. Custom Elements 䜹䝇䝍䝮せ⣲䜢䜲䞁䝇䝍䞁䝇 var xElem = new XElement(); document.body.appendChild(xElem); var xElem = document.createElement(`x-element`); <x-element></x-element>
- 11. Point ⊂⮬䛾䜶䝺䝯䞁䝖䜢ᐃ⩏䛷䛝䜛䚹 䜶䝺䝯䞁䝖䛻䝥䝻䝟䝔䜱/䝯䝋䝑䝗䜢ᐃ⩏䛷䛝䜛䚹 䝷䜲䝣䝃䜲䜽䝹䝁䞊䝹䝞䝑䜽䛸䜀䜜䜛㛵ᩘ䛜䛒䜛䚹
- 12. Templates Template䜢ᐉゝ <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> <script>alert(“hoge”);</script> </template> <template>䝍䜾䛷ᐉゝ <img>䛿src䜢ㄞ䜏䛻䛔䛛䛺䛔 <script>䜒ᐇ⾜䛥䜜䛺䛔
- 13. Templates Template䜢Activate <template id="mytemplate">...</template> <script> var t = document.getElementById('mytemplate'); t.content.querySelector('img').src = 'logo.png'; var clone = document.importNode(t.content, true); document.body.appendChild(clone); </script> DOM䛸䛧䛶ᢅ䛘䜛 Activate䛥䜜䛶ึ䜑䛶src䜢 ྲྀ䜚䛻⾜䛳䛯䜚䚸 script䜢ᐇ ⾜䛧䛯䜚䛩䜛䚹
- 14. Templates 䝷䜲䝣䝃䜲䜽䝹䝁䞊䝹䝞䝑䜽ෆ䛷Template䜢䛖 XElemProto.createdCallback = function() { var t = document.getElementById('x-elem-template'); var clone = document.importNode(t.content, true); this.appendChild(clone); 䡙 䜹䝇䝍䝮䜶䝺䝯䞁䝖䛜䜲䞁䝇䝍䞁䝇䛥䜜䛯 Ⅼ䛷template䜢ὶ䛧㎸䜐䚹
- 15. Point ● activate䛥䜜䜛䜎䛷䚸ືస䛧䛺䛔䚹 ● ᩥᏐิ䛷䛿䛺䛟DOM䛸䛧䛶ᢅ䛘䜛䛾䛷ᢅ䛔䜔䛩 䛔䚹
- 16. Shadow DOM ShadowRoot䜢సᡂ XElemProto.createdCallback = function() { var shadow = this.createShadowRoot(); shadow.innerHTML = "<b>䜋䛢䜋䛢</b>"; 䡙 shadowRoot䜢సᡂ shadowRootୗ䛿ู䝇䝁䞊䝥䛸 䛺䜚䚸እ㒊䛻ᙳ㡪䛧䛺䛔䚹
- 17. Shadow DOM ShadowRoot䛻Template䜢ᒎ㛤 <template id="x-elem-template"> <style>p { color: orange; } </style> ... var shadow = this.createShadowRoot(); var t = document.getElementById('x-elem-template'); var clone = document.importNode(t.content, true); shadow.appendChild(clone) template䛻style䜢ྵ䜐 shadowDOMෆ䛻ᒎ㛤䛥䜜䛯 style䛿እ㒊䛻ᙳ㡪䛧䛺䛔
- 18. Point ● Shadow Rootෆ䛾䝇䝁䞊䝥䛿እ㒊䛻ᙳ㡪䛧䛺䛔 ● style䛾䜹䝥䝉䝹䛜ྍ⬟
- 19. HTML Import html䜢import main.html <head> <link rel="import" href="xelement.html"> </head> 1䛴䛾URL䜢import䛩䜛䛾䜏 import䛥䜜䜛html䛜css/js➼䛾 link䜢ྵ䜐 xelement.html <link rel="import" href="xelement.html"> <script src="jquery.js"></script> <template>...
- 21. ⤖ᒁ䛺䛻䛜䛔䛔䛾?
- 22. ⏝䛷䛝䜛 <mini-dora color=”yellow”></mini-dora> <mini-dora color=”green”></mini-dora> <mini-dora color=”red”></mini-dora> <mini-dora color=”yellow”></mini-dora> <mini-dora color=”green”></mini-dora>
- 23. ศᴗ䛷䛝䜛 䝥䝻䜾䝷䝬: 䝁䞁䝫䞊䝛䞁䝖㛤Ⓨ(html, js) 䝕䝄䜲䝘䞊: 䝕䝄䜲䞁(css) 䝁䞊䝎䞊 㟼ⓗ䝁䞊䝕䜱䞁䜾(html, css)
- 24. ᶆ‽ UI䛾䝁䞁䝫䞊䝛䞁䝖䛾᪉ἲ 䝣䝺䞊䝮䝽䞊䜽䛻䜘䛳䛶䝞䝷䝞䝷 Webᶆ‽
- 25. Semantic! <div id=”blue-circle”> <div class=”w-c”>...</div> <div class=”w-c”>...</div> <div id=”red-c”>...</div> … 䝗䝷..䛘䜒..䜣? <x-doraemon></x-draemon> 䝗䝷䛘䜒䜣!
- 26. polymer䛾ヰ䛿?
- 27. Web Components䜢䛔䜔䛩䛟 without polymer <template id=”xtemplate”>...</template> <script> var XElm= document.registerElement(‘x-element’),{ prototype:{ createdCallback: function(){ var t = document.equalSelector(‘xtemplate’); var c = document.importNode(t.content, true); var shadow = this.createShadowRoot(); shadow.appendChild(c); } } }); </script>
- 28. Web Components䜢䛔䜔䛩䛟 with polymer <polymer-element name=”x-element”> 䚷<template>...</template> </polymer-element> 䛔䛔ឤ䛨䛻wrap䛧䛶䛟䜜䛶䜛䚹
- 29. Web Components+α Web Animations Two way bindings Layout Attributes Gestures 䛔䜝䛔䜝䛒䜛䜘䛖䛷䛩䛜ឡ䛧䜎䛩.
- 30. One More Thing
- 31. polymer Designer GUI䛷polymer element䜢స䜜䜛䝒䞊䝹
- 32. ARIGATO!