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