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

Custom Elements Everywhere

Avatar for Larissa Abreu Larissa Abreu
November 28, 2018
Programming
0
250

Custom Elements Everywhere

Avatar for Larissa Abreu

Larissa Abreu

November 28, 2018
Tweet

More Decks by Larissa Abreu

See All by Larissa Abreu
Defesa contra as artes das trevas - Github (2020)
Avatar for Larissa Abreu larissaabreu
0
290
Sempre teste mas debug se precisar
Avatar for Larissa Abreu larissaabreu
2
220
Guia prático para criação de componentes perfeitos
Avatar for Larissa Abreu larissaabreu
1
210
JavaScript e o teste filosofal
Avatar for Larissa Abreu larissaabreu
0
90
Web Components: fazendo do futuro uma realidade através do JS - Brasília
Avatar for Larissa Abreu larissaabreu
0
130
Web Components: fazendo do futuro uma realidade através do JS
Avatar for Larissa Abreu larissaabreu
0
77
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
Avatar for Larissa Abreu larissaabreu
0
110
Dando poder ao seu CSS através de Custom Properties
Avatar for Larissa Abreu larissaabreu
0
110
Componentes nativos: uma chance de mudar o futuro!
Avatar for Larissa Abreu larissaabreu
0
210

Other Decks in Programming

See All in Programming
Parallel::Pipesの紹介
Avatar for Shoichi Kaji skaji
2
890
技術懸念に立ち向かい 法改正を穏便に乗り切った話
Avatar for popCashew pop_cashew
0
1.1k
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
Avatar for Tomohiro Tani taniiicom
2
620
無関心の谷
Avatar for kanayannet kanayannet
0
120
Perlで痩せる
Avatar for Yuuki Shimizu yuukis
1
670
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ～他言語変換の仕組み～ / cdk-language-transformation
Avatar for k.goto gotok365
7
400
カクヨムAndroidアプリのリブート
Avatar for Nabe numeroanddev
0
270
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
Avatar for 株式会社Rebase_エンジニアリング rebase_engineering
0
150
REST API設計の実践 – ベストプラクティスとその落とし穴
Avatar for 武田 憲太郎 kentaroutakeda
2
350
Interface vs Types ~型推論が過多推論~
Avatar for Hiroki Omote hirokiomote
1
240
複数アプリケーションを育てていくための共通化戦略
Avatar for irof irof
9
3.5k
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
Avatar for TAKASE Kazuyuki guvalif
1
250

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Side Projects
Avatar for Sacha Greif sachag
454
42k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
9
620
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
76
5.8k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.3k

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