Shadow DOM? – How is existing templating done? – Shadow DOM come to the rescue?

View Github Repository Open presentation in a new window

shiawuen

See all presentation from shiawuen

Shadow DOM? – How is existing templating done? – Shadow DOM come to the rescue?

0 0

fsg-2013-march-shadow-dom

On Github shiawuen / fsg-2013-march-shadow-dom

Shadow DOM?

by shiawuen

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;
  }

Meh...

Shadow DOM come to the rescue?

What is that?

Let's try it out!

change me
  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

Featured news

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

At least I learning how to use it :P

Reading materials

Thank you!