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
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
NPOでのDevinの活用
codeforeveryone
0
450
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
710
PipeCDのプラグイン化で目指すところ
warashi
0
150
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
520
ふつうの技術スタックでアート作品を作ってみる
akira888
0
200
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
340
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
220
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
RailsConf 2023
tenderlove
30
1.1k
Producing Creativity
orderedlist
PRO
346
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Rails Girls Zürich Keynote
gr2m
94
14k
Optimizing for Happiness
mojombo
379
70k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Done Done
chrislema
184
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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