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
76

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
110
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
2
77
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
1
190
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
76
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
110
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
53
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
94
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
75
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
190

Other Decks in Programming

See All in Programming
897f2389f9228d4ef123f4196e75f3a4?s=48 yukimasa123
0
160
E876ea77f9fb4d686befb6e69eec9a7e?s=48 miyayou
1
300
13fb4600e942b31c69cfeaf4768c36cc?s=48 takazudo
7
740
E55fbffb4afd0a84d36c945ed68d8c19?s=48 caddi_eng
0
440
52dd8c5774366205f72a1644172b7423?s=48 shohata
0
120
F9d1e7c494103e9ad73723d4496334f9?s=48 mattdclarke
0
180
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
4
220
404a34d5e0d3d7b38237a8cbecf4c18a?s=48 seiseikai123
0
1.2k
F247cc71d9e0bba9f60709c3ae48dd80?s=48 decoch
2
120
406a99778248522c9acfe1f95b217a55?s=48 kotakawase
0
530
6aaaf03c4f5c681d89c3078bd6070a6f?s=48 rumi_yamaguchi
0
310
646a01801bac1886ddf86aee2de913ed?s=48 miyukki
0
130

Featured

See All Featured
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
28
11k
79acae287842acf29084005533a7fb3b?s=48 hursman
112
9.6k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
27k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
56
5.8k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
152
7k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
410k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.8k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
262
37k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
2.6k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
172
7.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