How is existing templating done?

	  <div id="Tmpl" class="hide">
	    <header></header>
	    <section></section>
	  <div>
						

Problems? Yes!

• Multiple CSS resets
• Big project always end up with bad CSS, say !important
• CSS class namespace collision
• Some evil code often screw you up, e.g.

  
    /* Real example! */
    form dd * {
      position: absolute;
      some: other;
      weird: property;
    }
  							

Shadow DOM come to the rescue?

What is that?

Let's try it out!

  var root = document.querySelector('#change-me').webkitCreateShadowRoot();
  root.textContent = 'Hello World!';
  root.innerHTML = '';
  root.innerHTML = '/o/\\o\\';
						

Ever have use case where you want to temporary reorganize some content?

• Not important headline
• Less important headline
• Election related headline
• Earthquake in Singapore
• Dull headline

How about the <template /> thing you say earlier?

• Not important headline
• Less important headline
• Election related headline
• Earthquake in Singapore
• Dull headline

Web Components?

Polyfill

By Dimitri Glazkov

dglazkov/Web-Components-Polyfill

• Not important headline
• Less important headline
• Election related headline
• Earthquake in Singapore
• Dull headline

Can I Use?

No!

because only Chrome have it...at the moment

Thou...not a problem if you only need to support Chrome

But....It is worth experimenting!

Q: Am I using this? erm...No =X