Web Components Revolution
31
Saeid Zebardast Web Components Revolution
-
Upload
web-standards-school -
Category
Education
-
view
258 -
download
0
Transcript of Web Components Revolution
Saeid ZebardastWeb Components Revolution
Hi! I’m Saeid,and I love We Components.
zebardast.irsaeidsaeidzebardast
I’ll talk about...
• Web Components?• The Specs• Use Them, Today!
How Do You Use Libraries?
• Bootstrap• Foundation• jQuery UI
1. Go to docs
2. Copy & Paste• All of them!
3. See result
Whyyy!
We can do it better
1.Find a tag (element)• bower install --save PolymerElements/paper-menu
2.Import • <link rel="import" href="../bower_components/paper-menu/paper-
menu.html">
3.Use it• <paper-menu selected="0">
<paper-item>Inbox</paper-item> <paper-item disabled>Starred</paper-item> <paper-item>Sent mail</paper-item></paper-menu>
Like a Boss
<google-map>
<google-map latitude="35.699694" longitude="51.338560"></google-map>
<nvd3-pie>
<nvd3-pie data="[[data]]" auto-resize show-legend></nvd3-pie>
<moment-js>
<moment-js format="YYYY-MM-DD HH:mm:ss"></moment-js>
2016-07-18 00:52:59
Web Components 😄
1.Create your own HTML elements2.Scope your styles3.React with lifecycle callbacks
The Specs
• Templates• Shadow DOM• Custom Elements• Imports
The Specs
• Templates• Shadow DOM• Custom Elements• Imports
Templates
Template are inert chunks of DOM the can be reused.
<template id="my-element"><h1>Awesome Trunk!</h1>
<img src=""></template><script>
var tmpl = document.querySelector(‘#my-element’); tmpl.content.querySelector("img").src = "trunk.gif";
document.body.appendChild(document.importNode(tmpl.content, true));</script>
Content
Templates Limitations
• No built-in data interpolation• {{}} don’t do anything...yet!
• Nested templates not activated automatically• Append each template separately
The Specs
• Templates• Shadow DOM
• Encapsulation• Custom Elements• Imports
• Provides style and markup encapsulation.• The same technology used by browser makers to implement tags:
• <video>• <video src="./be-happy.webm" controls>
Shadow DOM
Shadow HostThe node that contains all of our shadow DOM <video>
Shadow RootThe first node in the shadow DOM #document-fragment
Shadow BoundaryThe barrier that protects our shadow DOM
<div> <div>
<template><style>
h3 { color: white; background: tomato}</style>
<h3>A Shadow Header</h3></template><script>
var tmpl = document.querySelector('template'); var host = document.querySelector(.my-header');
var root = host.createShadowRoot();root.appendChild(document.importNode(tmpl.content, true));
</script></body>
Style Encapsulation
A Shadow Header
<body><h3>A Default Header</h3> A Default Header
The Specs
• Templates• Shadow DOM• Custom Elements
• Extensions!• Imports
Templates + Shadow DOM
Custom Elements
document.registerElement('tag-name', {prototype: proto
});
Custom Elements
• Tag name must have a dash• Proto must inherit from HTMLElement
var tmpl = document.querySelector('#some-template');
var MyElementProto = Object.create(HTMLElement.prototype);
MyElementProto.createdCallback = function() {var root = this.createShadowRoot();root.appendChild(document.importNode(tmpl.content, true);
};
var MyElement = document.registerElement('my-element', {prototype: MyElementProto
});
Create a Custom Element
• <my-element></my-element>
// OR
• document.createElement('my-element’);
// OR
• new MyElement();
Using Your Element
Life Cycle Callbacks
• createdCallback()When a new instance is created. Use like a constructor
• attachedCallback()When an element is added to the page
• detachedCallback()When an element is removed from the page
• attributeChangedCallback(attrName, oldVal, newVal)When one of an element's attributes changes
The Specs
• Templates• Shadow DOM• Custom Elements• Imports
• Packaging• Everything on one page
• Imports load external documents into your page.• Use a link tag, just like css.• Use rel type import
• <link rel="import" href="my-import.html">
Imports
Browser Support
Native Polyfill (webcomponents.js)
When Use It? Whenever You Want!When Not Use It? Whenever You Don’t Want!
• webcomponents.org• customelements.io• polymer-project.org• See you at the Polymer workshop!
Use Them, Today!
AnyQuestion,Comments?
Thank You 👏
zebardast.irsaeidsaeidzebardast
