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

Custom Elements Everywhere

Custom Elements Everywhere

Larissa Abreu

November 28, 2018
Tweet

More Decks by Larissa Abreu

Other Decks in Programming

Transcript

  1. Custom
    Elements
    Everywhere

    View Slide

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

    View Slide

  3. O que é Semântica?

    View Slide

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

    View Slide

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

    View Slide

  6. Desenvolvedores

    Header


    Main


    Footer


    Header


    Main


    Footer

    View Slide

  7. Leitores de tela

    Abrir


    Conteúdo

    aria-haspopup="true"
    aria-expanded=“false"
    aria-controls="modal">
    Abrir

    id="modal"
    aria-label="Modal">
    Conteúdo

    https://www.w3.org/WAI/standards-guidelines/aria/

    View Slide

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

    View Slide

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

    View Slide

  10. index.html










    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. youtube.com/new

    View Slide

  15. Custom
    Elements
    Everywhere
    custom-elements-everywhere.com/

    View Slide

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

    View Slide