Custom Elements Everywhere

@TheSweet_Lari Gamer, future Suicide Girl and Front-end Dev Larissa Abreu
@LarissaAbreu larissaabreu.github.io

O que é Semântica?

https://pt.wikipedia.org/wiki/Sem%C3%A2ntica

Semântica no html Pra quê? Para quem? ou melhor…

Desenvolvedores <div> Header </div> <div> Main </div> <div> Footer </div>
<header> Header </header> <main> Main </main> <footer> Footer </footer>

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/

Custom Elements Especificação da W3C https://www.w3.org/TR/custom-elements/

class SevenMasters extends HTMLElement { } customElements.define(‘seven-masters', SevenMasters); seven-masters.js //
WAI-ARIA // HTML semântico // conteúdo para SEO

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>

youtube.com/new

Custom Elements Everywhere custom-elements-everywhere.com/

Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io

Custom Elements Everywhere

Custom Elements Everywhere

Larissa Abreu

More Decks by Larissa Abreu

Other Decks in Programming

Featured

Transcript