Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Custom Elements Everywhere

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Larissa Abreu Larissa Abreu
November 28, 2018
Programming
290
0

Custom Elements Everywhere

Avatar for Larissa Abreu

Larissa Abreu

November 28, 2018

More Decks by Larissa Abreu

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

Other Decks in Programming

See All in Programming
作れる、でも消せるか？──安全に「枯らして消す」機能削除術 / Drain, Then Delete
Avatar for chobishiba chobishiba
2
1k
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
Avatar for アキキー | Akihisa Ikeda akihisaikeda
0
150
Jetpack Compose Mechanisms
Avatar for Jaewoong skydoves
3
870
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
2
1.4k
Modernizing iOS Apps
Avatar for seyfeddin seyfoyun
0
120
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
170
當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？
Avatar for James Wang jame2408
1
330
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
840
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
240
graphql-ruby を Spinel で速くしようとした話
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
120
AI-Powered Domain-Driven Design
Avatar for Alberto Brandolini ziobrando
0
320
[2026-10-09]一枚の布で作らなくてもいい。 信頼性は「パッチワーク」で紡がれる～既存の運用と新しい可能性をつなぎ合わせてきたCREの話～
Avatar for tosite tosite
0
110

Featured

See All Featured
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
1
410
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
650
It's Worth the Effort
Avatar for 3n 3n
188
29k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
720
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
420
Designing for Performance
Avatar for Lara Hogan lara
612
70k
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
Avatar for Christian Goodrich cargoodrich
3
880
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
2
960
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
12k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
540

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