custom elements with polymer web components #econfpsu16
TRANSCRIPT
![Page 1: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/1.jpg)
Custom Elements with Polymer Web ComponentsJohn Riviello@JohnRivDistinguished Engineer, Comcast Interactive Media
Elements: The Web Conference at Penn State – June 14, 2016
![Page 2: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/2.jpg)
Polymer &Web Components
”250/365 - Bricks" by Kenny Louie is licensed under CC BY 2.0
Why? What? How?
![Page 3: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/3.jpg)
Communicating & shipping web design & functionality updates across a large organization is HARD WORK
![Page 4: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/4.jpg)
Communicating & Sharing Web Updates Across Your Organization
1. Living Style Guides
2. Tiny Bootstraps
3. AngularJS Directives
4. React Components
5. Web Standards?
John Riviello – Custom Elements with Polymer Web Components4
Potential Technical Solutions:
![Page 5: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/5.jpg)
YES!Web Standards!
Web Components!
![Page 6: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/6.jpg)
What areWeb Components?
![Page 7: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/7.jpg)
What are Web Components?
4 Specs
John Riviello – Custom Elements with Polymer Web Components7
![Page 8: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/8.jpg)
What are Web Components?
Custom Elements
John Riviello – Custom Elements with Polymer Web Components8
![Page 9: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/9.jpg)
What are Web Components?
Custom Elements
John Riviello – Custom Elements with Polymer Web Components9
• Provides a way for authors to build their own
fully-featured DOM elements.
- <xc-tab>Your Wifi</xc-tab>
• Can extend existing HTML elements
- <button is="xc-button">Edit</button>
![Page 10: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/10.jpg)
What are Web Components?
HTML Imports
John Riviello – Custom Elements with Polymer Web Components10
![Page 11: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/11.jpg)
What are Web Components?
HTML Imports
John Riviello – Custom Elements with Polymer Web Components11
• Means to import custom elements
- <link rel="import" href="../xc-tab/xc-tab.html">
• Can link to external resources
- <link rel="import"
href="http://polygit.org/components/paper-
toast/paper-toast.html">
![Page 12: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/12.jpg)
What are Web Components?
Templates
John Riviello – Custom Elements with Polymer Web Components12
![Page 13: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/13.jpg)
What are Web Components?
Templates
John Riviello – Custom Elements with Polymer Web Components13
• Used to declare fragments of HTML- <template id="tab">
<div class="tab-content"></div>
</template>
• The element itself renders nothing
• Can be cloned and inserted in the document via
JavaScript, which will render the content
![Page 14: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/14.jpg)
What are Web Components?
Shadow DOM
John Riviello – Custom Elements with Polymer Web Components14
![Page 15: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/15.jpg)
What are Web Components?
Shadow DOM
John Riviello – Custom Elements with Polymer Web Components15
• Allows you to take a DOM subtree and hide it
from the document scope
• Hides CSS styles as well
• Common examples from HTML5 include:- <select>
- <video>
- <input type="date">
![Page 16: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/16.jpg)
Can we even use these things?
![Page 17: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/17.jpg)
Source: http://jonrimmer.github.io/are-we-componentized-yet/
Are We Componentized Yet?
![Page 18: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/18.jpg)
There’s hope.What’s better than hope?
![Page 19: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/19.jpg)
POLYFILLS!*as long as there is still hope*
![Page 20: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/20.jpg)
Web Components Polyfills
webcomponents.js
John Riviello – Custom Elements with Polymer Web Components20
• Custom Elements
• HTML Imports
• Templates
• Shadow DOM
• ES6 WeakMap
• Mutation Observers
Browser Support• IE10 (max polyfilling)
• IE11+/Edge
• Chrome (latest)
• Firefox (latest)
• Safari 7+
• Chrome Android (latest)
• Mobile Safari (latest)
Size: 33.3kB gzipped
![Page 21: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/21.jpg)
Web Components Polyfills
webcomponents-lite.js
John Riviello – Custom Elements with Polymer Web Components21
• Custom Elements
• HTML Imports
• Templates
• Shadow DOM
• ES6 WeakMap
• Mutation Observers
Browser Support• IE10 (flaky)
• IE11+/Edge
• Chrome (latest)
• Firefox (latest)
• Safari 7+
• Chrome Android (latest)
• Mobile Safari (latest)
Size: 33.3kB 12.0kB gzipped
![Page 22: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/22.jpg)
LightweightWeb ComponentLibraries
![Page 23: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/23.jpg)
Lightweight Web Component Libraries
X-Tag 5.0kB
John Riviello – Custom Elements with Polymer Web Components23
• IE9+/Edge
• Chrome (all)
• Firefox (all)
• Safari ”Mac” (5.1+?)
• Chrome & Android 4.0+
• Mobile Safari 5+
• Opera 11+
• IE10+/Edge
• Chrome 35+
• Firefox 35+
• Safari 7+
• Chrome Android (latest?)
• Mobile Safari (latest?)
• Opera (latest)
• IE11+/Edge
• Chrome (latest)
• Firefox (latest)
• Safari 7+
• Chrome Android (latest)
• Mobile Safari 7.1+
• Opera (latest)
Bosonic 9.5kB Polymer 37.2kB
![Page 24: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/24.jpg)
Google Polymer
![Page 25: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/25.jpg)
What is Polymer?
1. Material Design
2. A framework
3. Required to use Web Components
John Riviello – Custom Elements with Polymer Web Components25
Polymer is NOT:
![Page 26: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/26.jpg)
What is Polymer?
<script>var proto = Object.create(HTMLElement.prototype),
protoElement;
proto.createdCallback = function () {this.textContent = "I'm a proto-element.
Check out my prototype!"};
protoElement = document.registerElement('proto-element', {prototype: proto
});</script>
John Riviello – Custom Elements with Polymer Web Components26
Creating a Custom Element Natively
![Page 27: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/27.jpg)
What is Polymer?
<link rel="import"href="bower_components/polymer/polymer.html">
<script>Polymer({is: "proto-element",created: function() {this.textContent = "I'm a proto-element.
Check out my prototype!"}
});</script>
John Riviello – Custom Elements with Polymer Web Components27
Creating a Polymer Custom Element
![Page 28: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/28.jpg)
What is Polymer?
<!DOCTYPE html><html><head>
<script src="webcomponents-lite.js"></script><link rel="import" href="proto-element.html">
</head><body>
<proto-element></proto-element></body>
</html>
RESULT:I'm a proto-element. Check out my prototype!
John Riviello – Custom Elements with Polymer Web Components28
Using Our Custom Element
![Page 29: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/29.jpg)
What is Polymer?
Polymer({is: 'my-namecard',properties: {myName: {type: String
}},ready: function() {this.textContent = 'Hi! My name is ' + this.myName;
}});<my-namecard my-name="John"></my-namecard>
RESULT:Hi! My name is John
John Riviello – Custom Elements with Polymer Web Components29
Configuring Properties
![Page 30: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/30.jpg)
What is Polymer?
<dom-module id="my-namecard"><template><div>Hi! My name is <span>{{myName}}</span></div>
</template><script>Polymer({is: 'my-namecard',properties: {myName: {type: String
}}
});</script>
</dom-module>John Riviello – Custom Elements with Polymer Web Components30
Data Binding
<my-namecard my-name="John"></my-namecard>
RESULT:
Hi! My name is John
![Page 31: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/31.jpg)
What is Polymer?
<dom-module id="my-namecard"><template><div>Hi! My name is <span>{{myName}}</span></div>
</template>
<style>span {font-weight: bold;
}</style>
<script>Polymer({is: 'my-namecard',…
John Riviello – Custom Elements with Polymer Web Components31
Encapsulated Styles
<my-namecard my-name="John"></my-namecard><p><span>Span Text</span></p>
RESULT:
Hi! My name is John
Span Text
![Page 32: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/32.jpg)
What is Polymer?
xc-styles/xc-styles.html:<style is="custom-style">
:root { --si-blue-sky: #2B9CD8; }</style>
xc-custom-element/xc-custom-element.html:<link rel="import" href="../xc-styles/xc-styles.html"><dom-module id="xc-custom-element">
<template><style>:host { border: 1px solid var(--si-blue-sky); }
</style></template>
</dom-module>
John Riviello – Custom Elements with Polymer Web Components32
CSS Variables for Sharing Properties
![Page 33: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/33.jpg)
What is Polymer?
xc-fancy-element/xc-fancy-element.html:<style>
:host {color: var(--xc-fancy-element-color, red);
}</style>
xc-custom-element/xc-custom-element.html:<link rel="import" href="../xc-fancy-element/xc-fancy-element.html"><style is="custom-style">
xc-fancy-element {--xc-fancy-element-color: blue;
}</style><template><xc-fancy-element></xc-fancy-element></template>
John Riviello – Custom Elements with Polymer Web Components33
CSS Variables for Custom Styles
![Page 34: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/34.jpg)
What is Polymer?
xc-fancy-element/xc-fancy-element.html:<style>
:host {@apply(--xc-fancy-element);
}</style>xc-custom-element/xc-custom-element.html:<link rel="import" href="../xc-fancy-element/xc-fancy-element.html"><style is="custom-style">
--xc-fancy-element: {color: blue;margin: 0 auto;
};</style><template><xc-fancy-element></xc-fancy-element></template>
John Riviello – Custom Elements with Polymer Web Components34
Mixins for Custom Styles
![Page 35: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/35.jpg)
What is Polymer?
• Behaviors (shared functionality)• Events• Gestures (up, down, tap, track)
• CLI Tools• Built-in Test Framework• Generated Documentation Pages
John Riviello – Custom Elements with Polymer Web Components35
Other Features Polymer Provides
![Page 36: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/36.jpg)
Building with Polymer
![Page 37: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/37.jpg)
Building with Polymer
• Use someone else’s element(s)
• Build your own element(s)
• Build an entire app with Polymer
John Riviello – Custom Elements with Polymer Web Components37
How to Get Started
![Page 38: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/38.jpg)
Using Open Source Polymer Elements
![Page 39: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/39.jpg)
$ bower install GITHUB/ELEMENT --save
$ bower install PolymerElements/app-route --save
![Page 40: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/40.jpg)
https://elements.polymer-project.org
![Page 41: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/41.jpg)
https://customelements.io
![Page 42: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/42.jpg)
Building Your Own Polymer Element
![Page 43: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/43.jpg)
![Page 44: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/44.jpg)
$ polymer help
Available Commands
build Builds an application-style projecthelp Shows this help message,
or help for a specific commandinit Initializes a Polymer projectlint Lints the projectserve Runs the polyserve development servertest Runs web-component-tester
![Page 45: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/45.jpg)
$ polymer init? Which starter template would you like to use? › element: A blank element template
application: A blank application template shop: The "Shop" Progressive Web App demo app-drawer-template: A starter application…
![Page 46: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/46.jpg)
![Page 47: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/47.jpg)
![Page 48: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/48.jpg)
![Page 49: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/49.jpg)
Building with Polymer
• A component should do 1 thing
• Break up into smaller components
• Component doesn’t have to be visual
• Syndicating outside of primary use
John Riviello – Custom Elements with Polymer Web Components49
Things to Consider
![Page 50: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/50.jpg)
Building aPolymer App
![Page 51: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/51.jpg)
![Page 52: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/52.jpg)
Building with Polymer
$ npm install -g polymer-cli
$ polymer init
? Which starter template would you like to use?
element: A blank element template
› application: A blank application template shop: The "Shop" Progressive Web App demo
app-drawer-template: A starter application…
John Riviello – Custom Elements with Polymer Web Components52
Building a Polymer App
![Page 53: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/53.jpg)
Building with Polymer
? Application name cli-demo
? Main element name cli-demo-app
? Brief description of the application App Demo
John Riviello – Custom Elements with Polymer Web Components53
Building a Polymer App
![Page 54: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/54.jpg)
Building with Polymer
create bower.json
create index.html
create manifest.json
create README.md
create src/cli-demo-app/cli-demo-app.htmlcreate test/cli-demo-app/cli-demo-app_test.html
John Riviello – Custom Elements with Polymer Web Components54
Building a Polymer App
![Page 55: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/55.jpg)
Building with Polymer
Project generated!
Installing dependencies...
$ polymer serve
• Load up http://localhost:8080
John Riviello – Custom Elements with Polymer Web Components55
Building a Polymer App
Hello cli-demo-app
• View README.md for info on building & running tests• Create additional elements • Pull in external elements
![Page 56: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/56.jpg)
Deploying with Polymer
![Page 57: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/57.jpg)
Deploying with Polymer
• HTML Import external components
• Bundle internal components
- vulcanize (gulp, grunt or standalone)
- Polymer CLI: $ polymer build
John Riviello – Custom Elements with Polymer Web Components57
External vs. Internal
![Page 58: Custom Elements with Polymer Web Components #econfpsu16](https://reader034.vdocuments.net/reader034/viewer/2022042723/5871ac211a28abda6a8b5a0b/html5/thumbnails/58.jpg)
Custom Elements with Polymer Web Components
John Riviello – Custom Elements with Polymer Web Components58
Learning More• polymer-project.org• webcomponents.org• Polycasts with Rob Dodson on YouTube• 2016 Google I/O Polymer videos on YouTube• Polymer Summit videos on YouTube• Polymer Slack: polymer-slack.herokuapp.com
For Further Info & Feedback:
Twitter: @JohnRiv