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

O mágico mundo de Web Components

O mágico mundo de Web Components

Present at beltrao In Tech

Mateus Ortiz

June 26, 2014
Tweet

More Decks by Mateus Ortiz

Other Decks in Programming

Transcript

  1. com JS <my-widget></my-widget> var WidgetProto = Object.create(HTMLElement.prototype); ! WidgetProto.createdCallback =

    function() { this.textContent = "BeltraoInTech"; }; ! var Widget = document.registerElement('my-widget', { prototype: WidgetProto });
  2. Shadow Dom é a mesma tecnologia usada pelos fabricantes de

    navegadores para implemetar as tags como <video> e <textarea>.
  3. exemplo Shadow Dom <div class="widget"></div> var host = document.querySelector(".widget"); var

    root = host.createShadowRoot(); root.innerHTML = "<h1>Estou dentro da div</h1>";