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

Custom Elements Everywhere

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
230
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
110
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
Avatar for Larissa Abreu larissaabreu
0
140
Dando poder ao seu CSS através de Custom Properties
Avatar for Larissa Abreu larissaabreu
0
140
Componentes nativos: uma chance de mudar o futuro!
Avatar for Larissa Abreu larissaabreu
0
230

Other Decks in Programming

See All in Programming
プロダクトコードからライブラリの境界を見つける
Avatar for elmetal elmetal
PRO
0
100
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
2
960
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
450
技術的負債を組織課題として解く-増えすぎたマイクロサービスとの戦い-
Avatar for reimaru reimaru
1
2.8k
パズルゲームの作り方 / how to make puzzle games
Avatar for kaityo256 kaityo256
PRO
2
270
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.8k
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
350
見えないものを探る要求要件定義に必要な基本的思考 / invisible-requirement-thinking
Avatar for MinoDriven minodriven
14
6.6k
AI時代のコードレビューは人に向けるな、仕組みに向けろ
Avatar for meijin texmeijin
5
3.5k
機械に任せるテスト、人が見るテスト ⽣成AIで引き直した、運⽤保守フェーズの線引き
Avatar for KUSATAKE Daisuke dske104
0
160
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
210
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
120

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.7k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
520
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
350
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
530
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
46k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
3
3.9k

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