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
50

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
79
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
2
55
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
1
180
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
75
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
110
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
52
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
94
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
72
251c46a689557c394ceb553775e7ad3a?s=48 larissaabreu
0
190

Other Decks in Programming

See All in Programming
1145fb026140c0af54cf49a9da6e79ee?s=48 stefanscheidt
0
110
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
0
240
3931098ae486b6df619050c63e24f6cc?s=48 osyo
0
770
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
0
390
4ce43cd2535d0afe50065a743af646e9?s=48 dianaarnos
1
210
Fe1f65a4116d7d80691072061e0ad560?s=48 keiichiwatanabe
0
140
9bda8755a689204677a198ee85c0eb07?s=48 banjun
PRO
0
130
8e844e43f029ec38e206a464cf4587b3?s=48 ttskch
5
1.8k
E505897a79eede1a676f92740261e8f8?s=48 kubode
1
520
583e920a7e9238a1c21e923025f8f641?s=48 elainenaomi
4
170
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
2
210
9bda8755a689204677a198ee85c0eb07?s=48 banjun
PRO
0
170

Featured

See All Featured
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.6k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
17k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
16
880
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
203
9.9k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
180
14k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
13
980
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
52
3.3k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
263
11k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
162
6.8k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
17
2.1k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
235
18k

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