Downloaded 12 times
Uploaded bynaohito maeda
Polymer, A Web Component Polyfill Library
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 Welcometo 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.
- 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䜢ᐉゝ <templateid="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> <script>alert(“hoge”);</script> </template> <template>䝍䜾䛷ᐉゝ <img>䛿src䜢ㄞ䜏䛻䛔䛛䛺䛔 <script>䜒ᐇ⾜䛥䜜䛺䛔
- 13. Templates Template䜢Activate <templateid="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 ● ShadowRootෆ䛾䝇䝁䞊䝥䛿እ㒊䛻ᙳ㡪䛧䛺䛔 ● 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>...
- 20.
- 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.
- 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.
- 27. Web Components䜢䛔䜔䛩䛟 withoutpolymer <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䜢䛔䜔䛩䛟 withpolymer <polymer-element name=”x-element”> 䚷<template>...</template> </polymer-element> 䛔䛔ឤ䛨䛻wrap䛧䛶䛟䜜䛶䜛䚹
- 29. Web Components+α WebAnimations Two way bindings Layout Attributes Gestures 䛔䜝䛔䜝䛒䜛䜘䛖䛷䛩䛜ឡ䛧䜎䛩.
- 30.
- 31. polymer Designer GUI䛷polymerelement䜢స䜜䜛䝒䞊䝹
- 32.