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
220
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
130
Desbravando Web Components
mateusortiz
0
60
Web Components: é o Futuro?
mateusortiz
2
180
Other Decks in Programming
See All in Programming
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
150
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
530
DenoでOpenTelemetryに入門する
yotahada3
2
280
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
110
アーキテクトと美学 / Architecture and Aesthetics
nrslib
11
2.8k
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
720
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
180
RecSys2024 参加報告
unonao
1
180
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
300
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
11
2.9k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
490
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
170
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Testing 201, or: Great Expectations
jmmastey
42
7.3k
Navigating Team Friction
lara
183
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Thoughts on Productivity
jonyablonski
69
4.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
450
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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