Custom Elements with Polymer Web Components #econfpsu16

Custom Elements with
Polymer Web Components
John Riviello
@JohnRiv
Distinguished Engineer, Comcast Interactive Media
Elements: The Web Conference at Penn State – June 14, 2016

Polymer &
Web Components
”250/365 - Bricks" by Kenny Louie is licensed under CC BY 2.0
Why? What? How?

Communicating & shipping
web design & functionality
updates across a large
organization is HARD WORK

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:

YES!
Web Standards!
Web Components!

What are Web Components?
4 Specs

Custom Elements

Custom Elements
•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>

HTML Imports

HTML Imports
• 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">

Templates

Templates
• 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

Shadow DOM

Shadow DOM
•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">

Source: http://jonrimmer.github.io/are-we-componentized-yet/
Are We Componentized Yet?

There’s hope.
What’s better than
hope?

POLYFILLS!
*as long as there is still hope*

Web Components Polyfills
webcomponents.js
•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

Web Components Polyfills
webcomponents-lite.js
•Custom Elements
•HTML Imports
•Templates
•Shadow DOM
•ES6 WeakMap
•Mutation Observers
Browser Support
• IE10 (flaky)
• IE11+/Edge
• Chrome (latest)
• Safari 7+
• Mobile Safari (latest)
Size: 33.3kB 12.0kB gzipped

Lightweight
Web Component
Libraries

Lightweight Web Component Libraries
X-Tag 5.0kB
• 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)
• Safari 7+
• Mobile Safari 7.1+
• Opera (latest)
Bosonic 9.5kB Polymer 37.2kB

What is Polymer?
1. Material Design
2. A framework
3. Required to use Web Components
Polymer is NOT:

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>
Creating a Custom Element Natively

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>
Creating a Polymer Custom Element

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!
Using Our Custom Element

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
Configuring Properties

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>
Data Binding
<my-namecard my-name="John">
</my-namecard>
RESULT:
Hi! My name is John

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',
…
Encapsulated Styles
<my-namecard my-name="John">
</my-namecard>
<p><span>Span Text</span></p>
RESULT:
Hi! My name is John
Span Text

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>
CSS Variables for Sharing Properties

What is Polymer?
xc-fancy-element/xc-fancy-element.html:
<style>
:host {
color: var(--xc-fancy-element-color, red);
}
</style>
<link rel="import" href="../xc-fancy-element/xc-fancy-element.html">
xc-fancy-element {
--xc-fancy-element-color: blue;
}
</style>
<template><xc-fancy-element></xc-fancy-element></template>
CSS Variables for Custom Styles

What is Polymer?
xc-fancy-element/xc-fancy-element.html:
<style>
:host {
@apply(--xc-fancy-element);
}
</style>
<link rel="import" href="../xc-fancy-element/xc-fancy-element.html">
--xc-fancy-element: {
color: blue;
margin: 0 auto;
};
</style>
<template><xc-fancy-element></xc-fancy-element></template>
Mixins for Custom Styles

What is Polymer?
• Behaviors (shared functionality)
• Events
• Gestures (up, down, tap, track)
• CLI Tools
• Built-in Test Framework
• Generated Documentation Pages
Other Features Polymer Provides

Building with Polymer
• Use someone else’s element(s)
• Build your own element(s)
• Build an entire app with Polymer
How to Get Started

Using Open Source
Polymer Elements

$ bower install GITHUB/ELEMENT --save
$ bower install PolymerElements/app-route --save

https://elements.polymer-project.org

Building Your Own
Polymer Element

$ polymer help
Available Commands
build Builds an application-style project
help Shows this help message,
or help for a specific command
init Initializes a Polymer project
lint Lints the project
serve Runs the polyserve development server
test Runs web-component-tester

$ 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…

• A component should do 1 thing
• Break up into smaller components
• Component doesn’t have to be visual
• Syndicating outside of primary use
Things to Consider

$ 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…
Building a Polymer App

? Application name cli-demo
? Main element name cli-demo-app
? Brief description of the application App Demo

create bower.json
create index.html
create manifest.json
create README.md
create src/cli-demo-app/cli-demo-app.html
create test/cli-demo-app/cli-demo-app_test.html

Project generated!
Installing dependencies...
$ polymer serve
• Load up http://localhost:8080
Hello cli-demo-app
• View README.md for info on building & running tests
• Create additional elements
• Pull in external elements

Deploying with Polymer
• HTML Import external components
• Bundle internal components
- vulcanize (gulp, grunt or standalone)
- Polymer CLI:
$ polymer build
External vs. Internal

Custom Elements with Polymer Web Components
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

Custom Elements with Polymer Web Components #econfpsu16

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Custom Elements with Polymer Web Components #econfpsu16

Ähnlich wie Custom Elements with Polymer Web Components #econfpsu16 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Custom Elements with Polymer Web Components #econfpsu16