Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Custom Elements Everywhere

Avatar for Larissa Abreu Larissa Abreu
November 28, 2018
Programming
0
260

Custom Elements Everywhere

Avatar for Larissa Abreu

Larissa Abreu

November 28, 2018
Tweet

More Decks by Larissa Abreu

See All by Larissa Abreu
Defesa contra as artes das trevas - Github (2020)
Avatar for Larissa Abreu larissaabreu
0
300
Sempre teste mas debug se precisar
Avatar for Larissa Abreu larissaabreu
2
230
Guia prático para criação de componentes perfeitos
Avatar for Larissa Abreu larissaabreu
1
210
JavaScript e o teste filosofal
Avatar for Larissa Abreu larissaabreu
0
94
Web Components: fazendo do futuro uma realidade através do JS - Brasília
Avatar for Larissa Abreu larissaabreu
0
130
Web Components: fazendo do futuro uma realidade através do JS
Avatar for Larissa Abreu larissaabreu
0
80
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
Avatar for Larissa Abreu larissaabreu
0
120
Dando poder ao seu CSS através de Custom Properties
Avatar for Larissa Abreu larissaabreu
0
110
Componentes nativos: uma chance de mudar o futuro!
Avatar for Larissa Abreu larissaabreu
0
210

Other Decks in Programming

See All in Programming
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
Avatar for ternbusty ternbusty
3
180
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
Avatar for Takeru Hayasaka takehaya
9
1.7k
開発生産性を上げるための生成AI活用術
Avatar for starfish719 starfish719
3
670
ALL CODE BASE ARE BELONG TO STUDY
Avatar for uzulla uzulla
17
2.6k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
Avatar for Oliver Drotbohm olivergierke
2
840
Le côté obscur des IA génératives
Avatar for Pascal Le Merrer pascallemerrer
0
140
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
Avatar for teamLab teamlab
PRO
0
210
NixOS + Kubernetesで構築する自宅サーバーのすべて
Avatar for ichi-h ichi_h3
0
720
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
Avatar for m_t_tion1 kaorumuta
2
550
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
Avatar for Atsuya Sato natmark
2
510
タスクの特性や不確実性に応じた最適な作業スタイルの選択（ペアプロ・モブプロ・ソロプロ）と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
Avatar for yuki honyanya
3
160
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
Avatar for Swimmy reoandroider
0
110

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.7k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
A better future with KSS
Avatar for Kyle Neath kneath
239
18k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
30
2.7k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
238
140k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
KATA
Avatar for Megan Lloyd mclloyd
32
15k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k

Transcript

  1. Custom Elements Everywhere

  2. @TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu

    @LarissaAbreu larissaabreu.github.io

  3. O que é Semântica?

  4. https://pt.wikipedia.org/wiki/Sem%C3%A2ntica

  5. Semântica no html Pra quê? Para quem? ou melhor…

  6. Desenvolvedores <div> Header </div> <div> Main </div> <div> Footer </div>

    <header> Header </header> <main> Main </main> <footer> Footer </footer>

  7. 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/

  8. Custom Elements Especificação da W3C https://www.w3.org/TR/custom-elements/

  9. class SevenMasters extends HTMLElement { } customElements.define(‘seven-masters', SevenMasters); seven-masters.js //

    WAI-ARIA // HTML semântico // conteúdo para SEO

  10. 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>
  11. None
  12. None
  13. None

  14. youtube.com/new

  15. Custom Elements Everywhere custom-elements-everywhere.com/

  16. Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io