Download - Polytechnic speaker deck oluwadamilare
![Page 1: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/1.jpg)
GDG UI Devfest, November 2014
![Page 2: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/2.jpg)
+Ibrahim Oluwadamilare@IODamilare
#itshackademic
@polymer
![Page 3: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/3.jpg)
AgendaOverviewComponentsJoin the revolution
![Page 4: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/4.jpg)
Web Components: Overview
![Page 5: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/5.jpg)
What problems are we solving?
![Page 6: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/6.jpg)
@polymer
#itshackademic
![Page 8: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/8.jpg)
@polymer
#itshackademic
![Page 9: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/9.jpg)
@polymer
#itshackademic
![Page 10: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/10.jpg)
@polymer
#itshackademic
![Page 11: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/11.jpg)
@polymer
#itshackademic
![Page 12: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/12.jpg)
@polymer
#itshackademic
![Page 13: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/13.jpg)
<paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab></paper-tabs>
Less Code. Less confusion.
Web Components
![Page 14: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/14.jpg)
What are Web Components?
![Page 15: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/15.jpg)
Custom Elementsdefine new HTML/DOM elements
![Page 16: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/16.jpg)
![Page 17: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/17.jpg)
<paper-tabs selected=“1”> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab></paper-tabs>
declarative, readablemeaningful HTMLcommon way to extend → reusable
Custom Elementsdefine new HTML
@polymer
#itshackademic
![Page 18: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/18.jpg)
declarative, readablemeaningful HTMLcommon way to extend → reusable
Custom Elementsdefine new HTML
var tabs = document.querySelector('paper-tabs');tabs.addEventListener('core-activate', function() { console.log(this.selected);});
@polymer
#itshackademic
![Page 19: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/19.jpg)
Templatesnative client-side templating
![Page 20: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/20.jpg)
<template> <div class=“comment”> <img src=“image.png”> </div> <script>...</script></template>
use DOM to scaffold DOM → no XSS
content is inert until cloned/useddoc fragment → not part of the page
HTML Templatesnative client-side templates
parsed, not rendered
@polymer
#itshackademic
![Page 21: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/21.jpg)
Shadow DOMDOM/CSS scoping
![Page 22: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/22.jpg)
<video src=“foo.webm” controls></video>
@polymer
#itshackademic
![Page 23: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/23.jpg)
<video src=“foo.webm” controls></video>
Actually Shadow DOM
@polymer
#itshackademic
![Page 24: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/24.jpg)
<video src=“foo.webm” controls></video>
![Page 25: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/25.jpg)
HTML Importsloading web components
![Page 26: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/26.jpg)
@polymer
#itshackademic
![Page 27: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/27.jpg)
@polymer
#itshackademic
![Page 28: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/28.jpg)
Custom ElementsCreate new HTML elements and extend existing ones
TemplatesNative templating in the browser
Shadow DOMScoped CSS!!! + encapsulated markup
HTML ImportsLoad custom element definitions and resources
![Page 29: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/29.jpg)
@polymer
#itshackademic
![Page 30: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/30.jpg)
@polymer
#itshackademic
![Page 31: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/31.jpg)
@polymer
#itshackademic
![Page 32: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/32.jpg)
@polymer
#itshackademic
![Page 33: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/33.jpg)
Browser supportSummer 2014
![Page 34: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/34.jpg)
![Page 35: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/35.jpg)
Polyfills Web Componentswith platform.js
![Page 36: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/36.jpg)
Adds syntactic “sugar”with polymer.js
![Page 37: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/37.jpg)
Browser supportSummer 2014 (with Polymer)
![Page 38: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/38.jpg)
Browser supportSummer 2014 (with Polymer)
![Page 39: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/39.jpg)
Sugaring: Custom Elements
![Page 40: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/40.jpg)
vanilla
polymer
<polymer-element name=“paper-tabs”> …</polymer-element>
usage
<paper-tabs>…</paper-tabs>// document.createElement(‘paper-tabs’);
document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype)});
@polymer
#itshackademic
![Page 41: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/41.jpg)
document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype)});
vanilla
polymer
<polymer-element name=“paper-tabs”> …</polymer-element>
usage
<paper-tabs>…</paper-tabs>// document.createElement(‘paper-tabs’);
@polymer
#itshackademic
![Page 42: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/42.jpg)
vanilla
polymer
<polymer-element name=“paper-tabs”> …</polymer-element>
usage
<paper-tabs>…</paper-tabs>// document.createElement(‘paper-tabs’);
document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype)});
@polymer
#itshackademic
![Page 43: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/43.jpg)
vanilla
polymer
<polymer-element name=“paper-tabs”> …</polymer-element>
usage
<paper-tabs>…</paper-tabs>// document.createElement(‘paper-tabs’);
document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype)});
@polymer
#itshackademic
![Page 44: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/44.jpg)
vanilla
polymer
<polymer-element name=“super-button” extends=“button”> …</polymer-element>
usage
<button is=“super-button”>…</button>// document.createElement(‘button’, ‘super-button’);
document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’});
@polymer
#itshackademic
![Page 45: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/45.jpg)
vanilla
polymer
<polymer-element name=“super-button” extends=“button”> …</polymer-element>
usage
<button is=“super-button”>…</button>// document.createElement(‘button’, ‘super-button’);
document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’});
@polymer
#itshackademic
![Page 46: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/46.jpg)
vanilla
polymer
<polymer-element name=“super-button” extends=“button”> …</polymer-element>
usage
<button is=“super-button”>…</button>// document.createElement(‘button’, ‘super-button’);
document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’});
@polymer
#itshackademic
![Page 47: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/47.jpg)
vanilla
polymer
<polymer-element name=“super-button” extends=“button”> …</polymer-element>
usage
<button is=“super-button”>…</button>// document.createElement(‘button’, ‘super-button’);
document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’});
@polymer
#itshackademic
![Page 48: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/48.jpg)
Sugaring: Templates
![Page 49: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/49.jpg)
vanilla
polymer
<polymer-element name=“user-list” noscript> <template> <ul> <template repeat=“{{user, i in users}}”> <li>{{user.name}}</li> </template> </ul> </template></polymer-element>
<template> …</template>
@polymer
#itshackademic
![Page 50: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/50.jpg)
vanilla
polymer
<polymer-element name=“user-list” noscript> <template> <ul> <template repeat=“{{user, i in users}}”> <li>{{user.name}}</li> </template> </ul> </template></polymer-element>
<template> …</template>
@polymer
#itshackademic
![Page 51: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/51.jpg)
vanilla
polymer
<polymer-element name=“user-list” noscript> <template> <ul> <template repeat=“{{user, i in users}}”> <li>{{user.name}}</li> </template> </ul> </template></polymer-element>
<template> …</template>
@polymer
#itshackademic
![Page 52: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/52.jpg)
Sugaring: Shadow DOM
![Page 53: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/53.jpg)
var shadow = el.createShadowRoot();shadow.innerHTML = “<style>h2 { color: red; }</style>” + “<h2>I’m a profile-card</h2>”;
vanilla
<polymer-element name=“profile-card” noscript> <template> <link rel=“stylesheet” href=“styles.css”> <h2>I’m a profile-card</h2> </template></polymer-element>
polymer
@polymer
#itshackademic
![Page 54: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/54.jpg)
var shadow = el.createShadowRoot();shadow.innerHTML = “<style>h2 { color: red; }</style>” + “<h2>I’m a profile-card</h2>”;
vanilla
<polymer-element name=“profile-card” noscript> <template> <link rel=“stylesheet” href=“styles.css”> <h2>I’m a profile-card</h2> </template></polymer-element>
polymer
@polymer
#itshackademic
![Page 55: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/55.jpg)
var shadow = el.createShadowRoot();shadow.innerHTML = “<style>h2 { color: red; }</style>” + “<h2>I’m a profile-card</h2>”;
vanilla
<polymer-element name=“profile-card” noscript> <template> <link rel=“stylesheet” href=“styles.css”> <h2>I’m a profile-card</h2> </template></polymer-element>
polymer
@polymer
#itshackademic
![Page 56: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/56.jpg)
Components
![Page 57: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/57.jpg)
<ul><p>
<h1>
![Page 58: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/58.jpg)
<menu-button><page-scaffold>
<animated-pages>
![Page 59: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/59.jpg)
What if we designed HTMLfor the mobile web?
![Page 60: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/60.jpg)
<core-icon>
<paper-fab>
<core-drawer-panel>
<core-field>
![Page 61: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/61.jpg)
http://bit.ly/1jkTo5c
core-elements
Image: http://bit.ly/1mZjnTu
![Page 62: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/62.jpg)
<core-toolbar>A basic container for controlslike tabs or buttons
MY APP
@polymer
#itshackademic
![Page 63: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/63.jpg)
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controlslike tabs or buttons
MY APP
@polymer
#itshackademic
![Page 64: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/64.jpg)
<core-toolbar> <div>MY APP</div></core-toolbar>
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controlslike tabs or buttons
MY APP
@polymer
#itshackademic
![Page 65: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/65.jpg)
<core-toolbar> <core-icon-button icon=“menu”> </core-icon-button> <div>MY APP</div></core-toolbar>
<link rel=“import” href=“core-toolbar.html”>
<core-toolbar>A basic container for controlslike tabs or buttons
MY APP
@polymer
#itshackademic
![Page 66: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/66.jpg)
A simple container with a headersection and a content section
<core-header-panel> MY APP
<core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div></core-header-panel>
![Page 67: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/67.jpg)
A simple container with a headersection and a content section
<core-header-panel> MY APP
<core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div></core-header-panel>
![Page 68: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/68.jpg)
A simple container with a headersection and a content section
<core-header-panel> MY APP
<core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div></core-header-panel>
![Page 69: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/69.jpg)
A simple container with a headersection and a content section
<core-header-panel>
<core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div></core-header-panel>
MY APP
![Page 70: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/70.jpg)
<core-header-panel mode=“scroll" flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div></core-header-panel>
<core-header-panel>
Toolbar will scroll with the page
![Page 71: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/71.jpg)
A responsive container thatcombines a left- or right-side drawerpanel and a main content area.
<core-drawer-panel>
<core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div></core-drawer-panel>
![Page 72: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/72.jpg)
<core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div></core-drawer-panel>
A responsive container thatcombines a left- or right-side drawerpanel and a main content area.
<core-drawer-panel>
![Page 73: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/73.jpg)
<core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div></core-drawer-panel>
A responsive container thatcombines a left- or right-side drawerpanel and a main content area.
<core-drawer-panel>
![Page 74: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/74.jpg)
![Page 75: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/75.jpg)
paper-elements
![Page 76: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/76.jpg)
<paper-input floatinglabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"></paper-input>
@polymer
#itshackademic
![Page 77: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/77.jpg)
<paper-checkbox></paper-checkbox>
![Page 78: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/78.jpg)
<div class=“card”> <img src=“science.svg”> <paper-ripple fit></paper-ripple></div>
A reactive ink effect for indicating touchand mouse actions
<paper-ripple>
![Page 79: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/79.jpg)
<div class=“card”> <paper-shadow z=“5” animated> </paper-shadow></div>
A dynamic shadow for conveyingz-depth and spatial relationships
<paper-shadow>
@polymer
#itshackademic
![Page 80: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/80.jpg)
Styling
![Page 81: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/81.jpg)
<paper-slider min=“0” max=“100”></paper-slider>
allows you to style nodesinternal to an element’sshadow dom
::shadow
@polymer
#itshackademic
![Page 82: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/82.jpg)
allows you to style nodesinternal to an element’sshadow dom
::shadow
paper-slider::shadow #sliderKnobInner { background-color: #f4b400;}
<paper-slider min=“0” max=“100”></paper-slider>
@polymer
#itshackademic
![Page 83: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/83.jpg)
html /deep/ paper-ripple { background-color: #E91E63;}
styles will pierce allshadow boundaries
/deep/
@polymer
#itshackademic
![Page 84: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/84.jpg)
With ::shadow and /deep/ youcan apply sitewide themes
source: ebidel.github.io/material-playground
![Page 85: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/85.jpg)
polymer-project.org/apps/topeka/
![Page 86: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/86.jpg)
![Page 87: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/87.jpg)
polymer-project.org
![Page 88: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/88.jpg)
We’re not alone
![Page 89: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/89.jpg)
Mozilla Brick
![Page 90: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/90.jpg)
<brick-appbar>
<brick-deck>
<brick-tabbar>
![Page 91: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/91.jpg)
<core-icon>
<x-instagram>(not shown)
![Page 92: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/92.jpg)
Web Componentscan work together
![Page 93: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/93.jpg)
Not just browser makers
![Page 94: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/94.jpg)
<app-router>github.com/erikringsmuth/app-
router
my-site.com/order/:id
<app-router> <!-- matches an exact path --> <app-route path="/home" import="/pages/home-page.html"></app-route>
<!-- matches using a path variable --> <app-route path="/order/:id" import=“/pages/order-page.html"></app-route></app-router>
![Page 95: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/95.jpg)
<page-er>github.com/addyosmani/page-er
<page-er perpage="5" previous=“<< Previous" next=“Next >>"></page-er>
var pager = document.querySelector("page-er");document.addEventListener("polymer-ready", function() { pager.data = model.items;});
![Page 96: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/96.jpg)
<ajax-form>github.com/garstasio/ajax-
form
Full Name
Country
City
Join newsletter
<form is="ajax-form" action="my/form/handler"> <label>Full Name <input type="text" name=“full_name"> </label> …</form>
√
![Page 97: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/97.jpg)
Apps
![Page 98: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/98.jpg)
polymer-project.org
![Page 99: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/99.jpg)
chromestatus.com
![Page 100: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/100.jpg)
polymer-project.org/tools/designer/
![Page 101: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/101.jpg)
![Page 102: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/102.jpg)
github.com/ForceDotComLabs/mobile-ui-elementsgithub.com/ForceDotComLabs
![Page 103: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/103.jpg)
APIs
![Page 104: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/104.jpg)
APIs (as elements)
![Page 105: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/105.jpg)
I want to add a markerto a Google map.
@polymer
#itshackademic
![Page 106: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/106.jpg)
<style> #map { height: 400px; }</style>
<div id="map"></div>
<script src=“http://maps.googleapis.com/maps/api/js?callback=mapReady"></script><script> var marker = null; function getCurrentLocation(callback) { navigator.geolocation.watchPosition(callback); }
function addMarker(opts, info) { var marker = new google.maps.Marker(opts);
var infoWindow = new google.maps.InfoWindow({content: info});
google.maps.event.addListener(marker, 'click', function() { infoWindow.open(opts.map, marker); });
return marker; }
function mapReady() { var container = document.querySelector('#map'); var map = new google.maps.Map(container, { zoom: 14, disableDefaultUI: true }); getCurrentLocation(function(pos) { var current = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); map.setCenter(current);
// Re-position marker or create new one. if (marker) { marker.setPosition(map.getCenter()); } else { marker = addMarker({ position: current, map: map, title: 'Your location' }, '<b>Your location</b>'); } }); }</script>
So much code for one map marker!
@polymer
#itshackademic
![Page 107: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/107.jpg)
@polymer
#itshackademic
![Page 108: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/108.jpg)
![Page 109: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/109.jpg)
![Page 110: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/110.jpg)
![Page 111: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/111.jpg)
![Page 112: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/112.jpg)
![Page 113: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/113.jpg)
googlewebcomponents.github.iogithub.com/GoogleWebComponents
![Page 114: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/114.jpg)
youtube.com/watch?v=eORqFaf_QzM
![Page 115: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/115.jpg)
Join the revolution
![Page 116: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/116.jpg)
Learn
![Page 117: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/117.jpg)
![Page 118: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/118.jpg)
polymer-project.org
![Page 119: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/119.jpg)
Build
![Page 120: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/120.jpg)
Start with <seed-element>github.com/PolymerLabs/seed-element
![Page 121: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/121.jpg)
![Page 122: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/122.jpg)
youtube.com/watch?v=2toYLLcoY14
![Page 123: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/123.jpg)
http://goo.gl/UjLvb2
Chrome Dev Editor
![Page 124: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/124.jpg)
Share!
![Page 125: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/125.jpg)
customelements.io
![Page 126: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/126.jpg)
{ "name": "my-element", "version": "0.0.0", "description": "My awesome Custom Element", "license": "MIT", "keywords": [ "web-components" ], "ignore": [ "**/.*", "node_modules", "bower_components" ]}
bower.json
@polymer
#itshackademic
![Page 127: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/127.jpg)
EXPLORE
![Page 128: Polytechnic speaker deck oluwadamilare](https://reader035.vdocuments.pub/reader035/viewer/2022070519/58f0874f1a28ab747b8b4579/html5/thumbnails/128.jpg)
<thank-you>
+Ibrahim Oluwadamilare@IODamilare