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

Avatar for Mateus Ortiz

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