Post on 16-Jul-2015
web component and
polymerSpeaker: Imam Raza
GDG Karachi Event 24th January
Web components are a collection of
specifications that enable developers to
create their web applications as a set of
reusable components.
What are web component?
● Custom Elements
● HTML templates
● Shadow DOM
● HTML imports
Web component composition
Enable developers to create their own
elements that are relevant to their design
as part of the DOM structure with the
ability to style/script them just like any
other HTML tag.
Custom Elements
Custom element Example
Let developer define fragments of markup
that stay consistent across web pages with
the ability to inject dynamic content using
JavaScript.
HTML Templates
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
HTML templates example
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
HTML templates example
Abstract all the complexities from the
markup by defining functional boundaries
between the DOM tree and the subtrees
hidden behind a shadow root.
CSS styles defined inside a Shadow Root
won't affect its parent document, CSS
styles defined outside the Shadow Root
won't affect the main page
Shadow DOM
Shadow DOM
<div id="host"></div>
var host = document.querySelector('#host');
var root = host.createShadowRoot(); // Create a Shadow
Root
var div = document.createElement('div');
div.textContent = 'This is Shadow DOM';
root.appendChild(div); // Append elements to the Shadow
Root
Shadow DOM example
● For CSS we have <link rel="stylesheet">
● For JS we have <script src=””>
● For image its <image src=””>
● For HTML ? iFrame? AJAX?
HTML Imports
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import"
href="http://example.com/elements.html">
HTML imports Examples
Browser Support
Custom Elements
Html Imports
Shadow DOMs
HTML templates
Polymer provides a set of polyfills that
enables us to use web components in non-
compliant browsers with an easy-to-use
framework
Here Comes Polymer
● Allow us to create custom elements with
user defined naming schemes.
● Allowing each custom element to have
its own template
● Providing a suite of ready made UI
How Polymer did this
● bower install --save Polymer/polymer
Installing Polymer
● create index.html
● include platform.js
<script
src="bower_components/platform/platfo
rm.js"></script>
Installing polymer
Download and install custom
element
Vulcanize inlines all your HTML imports,
flattens their dependencies, and produces
an output that generates far fewer network
requests.
Vulcanize