WEBCOMPONENTS

THE FUTURE WEBhttp://goo.gl/Nh8jd9

HOW ARE WE DEVELOPING?

Let's say you want a build a page like

DAY TO DAY APPROACH

1. Go to getbootstrap.com2. Get the CDN links for CSS and JS3. Copy the Starter Template and Make Changes

WHAT ABOUT PLUGINS?

Say a Date Picker..

1. Go to jqueryui.com2. Download the source example3. Update and make changes

PRIMARY PROBLEM

NAMESPACE COLLISION

window.$j = jQuery.noConflict();

NO ENCAPSULATION OF MARK UP AND STYLES

.search .datepicker{ background:green;}.widget-clock .datepicker{ background:yellow;}

IFRAMES???

HOW CAN WE SOLVE THIS IN A BETTER WAY?

and a date picker will be generated for you

And a Bootstrap Inverse Navbar will be scaffolded

JUST IMAGINE

If you can write a tag like

<date-picker data-start="today" data-disable="after 10 days"></date-picker>

Or this

<bootstrap-nav-inverse>

<proj>My Project</proj>

<link>Home</link>

<link>About</link>

<link>Contact</link>

</bootstrap-nav-inverse>

OR EVEN BETTER..

<GANGNAM-STYLE></GANGNAM-STYLE>

MORE REALISTIC

<TWITTER-BUTTON></TWITTER-BUTTON>

Tweet 1,114

Follow @zenorocha 17.5K followers

Tweet #customelements

Tweet to @zenorocha

ONE MORE

<DROPBOX-BUTTON></DROPBOX-BUTTON>

Choose from Dropbox Save to Dropbox

HOW CAN WE ACHIEVE THIS?

SURPISE!! SURPISE!!This is already present in our browser

WHAT DO I MEAN?

HAVE YOU EVER WONDERED?

Inspect Me!!

Check : Inspecting Elements

SOMETHING BIGGER?

0:12

<video width="320" height="240" controls=""> <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"> <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"> Your browser does not support the video tag.</video>

HOW CAN WE DO THIS?

WEB COMPONENTS

Web Components === Write your own HTML tags & behaviours

WEB COMPONENTSAre built using 4 key pieces

HTML TEMPLATES

SHADOW DOM

CUSTOM ELEMENTS

HTML IMPORTS

BROWSER SUPPORT

More Details

POLYFILLS

Polymer

Bosonic

x-tag

HTML TEMPLATES

SHADOW DOM

CUSTOM ELEMENTS

HTML IMPORTS

HTML TEMPLATESIn simple terms, these are just

These tags are inert - Parsed Not Rendered

Most importantly, the content inside the tag is hidden fromDOM ( $("template img") ordocument.querySelectorAll("template img"))

<template></template>

<template id="myTemplate"> <img src="flowers.png"> <audio controls=""> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio></template>

WHILE DEVELOPING

Encapsulate HTML will be stored here<template id="myTemplate">

<img src="image.png">

<audio controls="">

<source src="audio.ogg" type="audio/ogg">

<source src="audio.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

</template>

<script>

</script>

// Get the template content

var content = document.querySelector('#myTemplate').content;

// Modify if necessary

var img = content.querySelector('img');

img.src = "flowers.png";

// Append the content to DOM

document.body.appendChild(content.cloneNode());