Web Components Revolution

Saeid Zebardast
Web Components Revolution

Hi! I’m Saeid,
and I love We Components.
zebardast.ir
saeid
saeidzebardast

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

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>

<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 elements
2.Scope your styles
3.React with lifecycle callbacks

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 Host
The node that contains all of our shadow DOM
<video>
Shadow Root
The first node in the shadow DOM
#document-fragment
Shadow Boundary
The 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!

Any
Question,
Comments?
Thank You 👏
zebardast.ir
saeid
saeidzebardast

Web Components Revolution

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Web Components Revolution

Ähnlich wie Web Components Revolution (20)

Mehr von Web Standards School

Mehr von Web Standards School (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web Components Revolution