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
92
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
80
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
Avatar for Larissa Abreu larissaabreu
0
120
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
生成AI時代のコンポーネントライブラリの作り方
Avatar for touyou touyou
1
260
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
3
470
RailsGirls IZUMO スポンサーLT
Avatar for 16bit_idol 16bitidol
0
190
脱Riverpod？fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
Avatar for Takuma Osada ostk0069
0
340
The Niche of CDK Grant オブジェクトって何者？/the-niche-of-cdk-what-isgrant-object
Avatar for hassaku63 hassaku63
1
500
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
Avatar for Yutaro Muta yutailang0119
0
160
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ～継続的な取り組みを添えて～
Avatar for Takuya TAKAHASHI takutakahashi
1
310
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
1
1.1k
Goで作る、開発・CI環境
Avatar for Shinpei Mine sin392
0
260
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
Avatar for Irina Nazarova irinanazarova
0
200
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
2
650
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
Avatar for 岡本秀明 h_okkah
0
210

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
970
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k

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