Polymer and web component

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>



<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

Polymer and web component

Technology

Transcript of Polymer and web component