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

Custom Elements Everywhere

251c46a689557c394ceb553775e7ad3a?s=47 Larissa Abreu
November 28, 2018
Programming
0
46

Custom Elements Everywhere

251c46a689557c394ceb553775e7ad3a?s=128

Larissa Abreu

November 28, 2018
Tweet

More Decks by Larissa Abreu

See All by Larissa Abreu
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
62
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
2
54
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
1
180
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
74
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
110
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
52
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
91
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
72
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
180

Other Decks in Programming

See All in Programming
636420dfa4bd120435447924327530f0?s=48 nichimu
0
130
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
1
130
7336da77de517e04e2438553e4f8071d?s=48 kampersanda
28
9.5k
1fab9d01b25e99522f3dfd01e3d4cb51?s=48 soutaro
3
580
2f2c7576c7b5d763ad12f342b9afc3a1?s=48 akkyie
0
470
Eb6733f8d1fe3c983ff11b830945eccb?s=48 mikito
1
200
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
310
Beb422437c1dfb5366f197919e41ac50?s=48 lilobase
PRO
2
200
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
190
8f84b7d8869ef6005d89b378e8661f7c?s=48 masuda220
7
2.9k
23190387d424e33d6a1a807cea1e0469?s=48 osamtimizer
0
210
Fd8ec708dd64775183ba0ad57a5efb28?s=48 yuta25
1
170

Featured

See All Featured
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
226
8.7k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
28k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
47k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
631
48k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
64
4.1k
A415db3ac9e9668acbc1fb36eead84ac?s=48 mthomps
40
2.4k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
95
5.6k
79acae287842acf29084005533a7fb3b?s=48 hursman
108
9.4k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
89
4.1k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
208
10k

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