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
Custom Elements Everywhere
Search
Larissa Abreu
November 28, 2018
Programming
0
260
Custom Elements Everywhere
Larissa Abreu
November 28, 2018
Tweet
Share
More Decks by Larissa Abreu
See All by Larissa Abreu
Defesa contra as artes das trevas - Github (2020)
larissaabreu
0
300
Sempre teste mas debug se precisar
larissaabreu
2
230
Guia prático para criação de componentes perfeitos
larissaabreu
1
210
JavaScript e o teste filosofal
larissaabreu
0
94
Web Components: fazendo do futuro uma realidade através do JS - Brasília
larissaabreu
0
130
Web Components: fazendo do futuro uma realidade através do JS
larissaabreu
0
80
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
larissaabreu
0
120
Dando poder ao seu CSS através de Custom Properties
larissaabreu
0
110
Componentes nativos: uma chance de mudar o futuro!
larissaabreu
0
210
Other Decks in Programming
See All in Programming
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
開発生産性を上げるための生成AI活用術
starfish719
3
670
ALL CODE BASE ARE BELONG TO STUDY
uzulla
17
2.6k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
840
Le côté obscur des IA génératives
pascallemerrer
0
140
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
210
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
720
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
550
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Why Our Code Smells
bkeepers
PRO
339
57k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
A better future with KSS
kneath
239
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
Automating Front-end Workflow
addyosmani
1371
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Cult of Friendly URLs
andyhume
79
6.6k
KATA
mclloyd
32
15k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Transcript
Custom Elements Everywhere
@TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu
@LarissaAbreu larissaabreu.github.io
O que é Semântica?
https://pt.wikipedia.org/wiki/Sem%C3%A2ntica
Semântica no html Pra quê? Para quem? ou melhor…
Desenvolvedores <div> Header </div> <div> Main </div> <div> Footer </div>
<header> Header </header> <main> Main </main> <footer> Footer </footer>
Leitores de tela <button> Abrir </button> <div class="modal"> Conteúdo </div>
<button aria-haspopup="true" aria-expanded=“false" aria-controls="modal"> Abrir </button> <div id="modal" aria-label="Modal"> Conteúdo </div> https://www.w3.org/WAI/standards-guidelines/aria/
Custom Elements Especificação da W3C https://www.w3.org/TR/custom-elements/
class SevenMasters extends HTMLElement { } customElements.define(‘seven-masters', SevenMasters); seven-masters.js //
WAI-ARIA // HTML semântico // conteúdo para SEO
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body>
</body> </html> <seven-masters></seven-masters> <script type="module" src=“seven-masters.js"></script>
None
None
None
youtube.com/new
Custom Elements Everywhere custom-elements-everywhere.com/
Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io