Web Components

The Future Web

http://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.com
  2. Get the CDN links for CSS and JS
  3. Copy the Starter Template and Make Changes

What about plugins?


Say a Date Picker..


  1. Go to jqueryui.com
  2. Download the source example
  3. 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?

Just Imagine


If you can write a tag like
and a date picker will be generated for you

Or this 


   
   	   My Project
   	   Home</link>
   	   About</link>
   	   Contact</link>
And a Bootstrap Inverse Navbar will be scaffolded

Or even better..

<gangnam-style></gangnam-style>

More Realistic


<twitter-button></twitter-button>



One More


<dropbox-button></dropbox-button>



How can we achieve this?


Surpise!! Surpise!!

This is already present in our browser


What do I mean?

Have you ever wondered?



Check : Inspecting Elements

Something Bigger?


How can we do this?

Web Components


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

Web Components

Are built using 4 key pieces


Browser Support

More Details

Polyfills


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

While Developing


Encapsulate HTML will be stored here

SHADOW DOM


  • Encapsulate Markup, Styles and Scripts
  • Restricts the visibility and accessibility of content/code of an Object to the Outside World
  • Markup Boundary
  • Style Boundary
  • Script Boundary

Example


And when time comes

<script>
  // the element on page
  var textShadow = document.querySelector('#uppercase-ele')
                           .createShadowRoot();
  var template = document.querySelector('#uppercase'); 
  textShadow.appendChild(template.content.toUpperCase());
</script>

How does it work?


And


Finally




     

      

         THIS WILL APPEAR IN UPPERCASE


~~ SHADOW DOM ~~

Custom Elements


TagName(HTML Templates + Shadow DOM) = Custom Elements


Instead of 
Capitalize Me
This would look more Semantic-ish 
Capitalize Me

Creating Custom Elements


  • We use registerElement() to create a new element
  • The tag name must have a - (dash)


Example

var customButton = document.registerElement('custom-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

Events


  • createdCallback -- Custom Element created
  • attachedCallback -- Custom Element Attached to DOM
  • detachedCallback -- Custom Element Removed from DOM
  • attributeChangedCallback -- Custom Element Added or Updated or Removed

Sample Init


var obj = {
  createdCallback: function(){
   var shadow = this.createShadowRoot();
   var template = document.querySelector('#message');
   shadow.appendChild(template.content);
  },

  attachedCallback : function(){
    console.log("attached Callback");
  },

  detachedCallback : function(){
    console.log("detached Callback");
  },

  attributeChangedCallback : function(attrName, oldVal, newVal){
    console.log("attrname : "+attrname+" :: oldval : "+oldVal+" :: newval : "+newVal)
  }
}
var customPrototype = Object.create(HTMLElement.prototype, obj);
var upperCase = document.registerElement('upper-case', {prototype: customPrototype});

HTML Imports


  • Importing HTML into a page
  • To Externalize the component and make it reusable

Loading Events

Demo

Final Words


Questions?

Thanks!