Polymer and web component

web component and
polymer
Speaker: 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

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

<link rel="import"
href="http://example.com/elements.html">
HTML imports Examples

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

Polymer and web component

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Polymer and web component

Similar to Polymer and web component (20)

Recently uploaded

Recently uploaded (20)

Polymer and web component