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
210
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
250
Sempre teste mas debug se precisar
larissaabreu
2
190
Guia prático para criação de componentes perfeitos
larissaabreu
1
190
JavaScript e o teste filosofal
larissaabreu
0
82
Web Components: fazendo do futuro uma realidade através do JS - Brasília
larissaabreu
0
120
Web Components: fazendo do futuro uma realidade através do JS
larissaabreu
0
71
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
larissaabreu
0
100
Dando poder ao seu CSS através de Custom Properties
larissaabreu
0
98
Componentes nativos: uma chance de mudar o futuro!
larissaabreu
0
200
Other Decks in Programming
See All in Programming
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
最近追加した型の紹介とその振り返り
aki19035vc
0
170
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
Trial
cairolibrary720
1
130
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Building an army of robots
kneath
301
42k
How to Think Like a Performance Engineer
csswizardry
4
590
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Faster Mobile Websites
deanohume
303
30k
Making Projects Easy
brettharned
111
5.7k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Designing the Hi-DPI Web
ddemaree
276
34k
Web Components: a chance to create the future
zenorocha
307
41k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
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