The document discusses how web components can be used to define custom HTML elements that encapsulate markup, styles, and behavior. Web components utilize HTML templates, shadow DOM, custom elements, and HTML imports. Currently browser support exists through polyfills like Polymer and Bosonic. The document provides examples of how common interface elements like buttons, date pickers, and videos could be implemented as custom elements through these web component technologies.

1. WEB
COMPONENTS
THE FUTURE WEB
http://goo.gl/Nh8jd9

2. HOW ARE WE DEVELOPING?
Let's say you want a build a page like

3. DAY TO DAY APPROACH
1. Go to getbootstrap.com
2. Get the CDN links for CSS and JS
3. Copy the Starter Template and Make Changes

4. WHAT ABOUT PLUGINS?
Say a Date Picker..
1. Go to jqueryui.com
2. Download the source example
3. Update and make changes

5. PRIMARY PROBLEM
NAMESPACE COLLISION
window.$j = jQuery.noConflict();
NO ENCAPSULATION OF MARK UP AND STYLES
.search .datepicker
{
background:green;
}
.widget-clock .datepicker
{
background:yellow;
}

6. IFRAMES???
HOW CAN WE SOLVE THIS IN A BETTER WAY?

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

8. <GANGNAM-STYLE></GANGNAM-STYLE>

9. MORE REALISTIC
<TWITTER-BUTTON></TWITTER-BUTTON>
Tweet 1,114
Follow
@zenorocha 17.5K followers
Tweet
#customelements
Tweet
to
@zenorocha

10. ONE MORE
<DROPBOX-BUTTON></DROPBOX-BUTTON>
Choose from Dropbox Save to Dropbox

11. HOW CAN WE ACHIEVE THIS?
SURPISE!! SURPISE!!
This is already present in our browser
WHAT DO I MEAN?

12. HAVE YOU EVER WONDERED?
Inspect Me!!
Check : Inspecting Elements

13. 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?

14. WEB COMPONENTS
Web Components === Write your own HTML tags & behaviours

15. WEB COMPONENTS
Are built using 4 key pieces
HTML TEMPLATES
SHADOW DOM
CUSTOM ELEMENTS
HTML IMPORTS

16. BROWSER SUPPORT
More Details

17. POLYFILLS
Polymer
Bosonic
x-tag

18. HTML TEMPLATES
SHADOW DOM
CUSTOM ELEMENTS
HTML IMPORTS

19. HTML TEMPLATES
In simple terms, these are just
These tags are inert - Parsed Not Rendered
Most importantly, the content inside the tag is hidden from
DOM ( $("template img") or
document.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>

20. 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());