Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A future called Web Components

A future called Web Components

HTML5 LA

Zeno Rocha

December 17, 2013
Tweet

More Decks by Zeno Rocha

Other Decks in Programming

Transcript

  1. using JS <html5-la></html5-la> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function()

    { this.textContent = ‘HTML5 LA!'; }; document.register(‘html5-la', { prototype: proto });
  2. how to use it? <polymer-element name=“html5-la" attributes="where"> <script> Polymer(‘html5-la', {

    where: ‘Santa Monica’, created: function() { // do something } }); </script> </polymer-element>
  3. how to use it? // 1. Access template’s content var

    t = document.querySelector('#myTemplate').content; // 2. Manipulate internal element t.querySelector('img').src = 'logo.png'; // 3. Clone and append in the DOM document.body.appendChild(t.cloneNode(true));
  4. how to use it? <h1>Foo</h1> <div id=”elem”></div> var elem =

    document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = '<h1>Bar</h1>';
  5. markup, style & script encapsulated <h1>Foo</h1> <div id=”elem”></div> var elem

    = document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = ‘<h1>Bar</h1>’ + ‘<style>h1 { color: red; }</style>’;