Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
O mágico mundo de Web Components
Search
Mateus Ortiz
June 26, 2014
Programming
2
230
O mágico mundo de Web Components
Present at beltrao In Tech
Mateus Ortiz
June 26, 2014
Tweet
Share
More Decks by Mateus Ortiz
See All by Mateus Ortiz
O maravilhoso mundo do front-end... não
mateusortiz
0
140
Desbravando Web Components
mateusortiz
0
64
Web Components: é o Futuro?
mateusortiz
2
190
Other Decks in Programming
See All in Programming
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.7k
kiroでゲームを作ってみた
iriikeita
0
170
The State of Fluid (2025)
s2b
0
170
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
600
Understanding Ruby Grammar Through Conflicts
yui_knk
1
110
JetBrainsのAI機能の紹介 #jjug
yusuke
0
200
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
9
680
AHC051解法紹介
eijirou
0
550
新しいモバイルアプリ勉強会(仮)について
uetyo
1
260
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
530
ワープロって実は計算機で
pepepper
2
1.3k
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
420
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rails Girls Zürich Keynote
gr2m
95
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Building Adaptive Systems
keathley
43
2.7k
A designer walks into a library…
pauljervisheath
207
24k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.8k
Designing for humans not robots
tammielis
253
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Faster Mobile Websites
deanohume
309
31k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
O Mágico Mundo De Web Components @mteusortiz
@mteusortiz /mateusortiz Front-End Developer
None
None
Web Components
HTML5 é o Futuro?
None
O Futuro
None
<x-heart> http://mateusortiz.github.io/x-heart/
None
Web Components Shadow DOM Template Custom Elements HTML Imports Decorators
Custom Elements
Antes com <element> <element name="x-button" constructor="XBUTTON" attributes="lg sm xs"> <!--
Content --> </element>
Antes com <element> <element name="x-button" extends="button"> <!-- Content --> </element>
http://goo.gl/GWatuU
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 });
Lifecycle Callbacks createdCallback(); attachedCallback(); detachedCallback(); attributeChangedCallback();
Funciona no IE6
None
t polymer-project.org
t x-tags.org
W3C standards platform polyfills Template shadow dom HTML Imports Custom
Elements
Com Polymer <polymer-element name="x-button" attributes="color"> <script> Polymer('x-button', { color: 'red',
created: function() { // ... } }); </script> </polymer-element>
Lifecycle Callbacks Polymer created(); detached(); attributeChanged(); attached();
Template
Templates são pedaços inertes de DOM que podem ser reutilizados.
# GAMBIARRA existe vários Templates para server- side e client-side
<template>
como criar? <template> <p>BeltraoInTech...</p> <img src="beltrao.png"/> </template>
como usar? var tmpl = document.querySelector("#template"); tmpl.content.querySelector("img").src = "dog.gif"; document.body.appendChild(tmpl.content.cloneNode(true));
Shadow DOM
O SHADOW DOM encapsula STYLE e MARCAÇÃO.
<iframe>
Shadow Dom é a mesma tecnologia usada pelos fabricantes de
navegadores para implemetar as tags como <video> e <textarea>.
None
t mas voltaram atrás
exemplo Shadow Dom <div class="widget"></div> var host = document.querySelector(".widget"); var
root = host.createShadowRoot(); root.innerHTML = "<h1>Estou dentro da div</h1>";
Encapsula style, marcação e script
HTML Imports
t importações carregar documentos externos em nossa página.
HTML Import <link rel="import" href="beltra-tech.html">
None
Obrigado TWITTER.COM/MTEUSORTIZ GITHUB.COM/MATEUSORTIZ