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
290
0

Custom Elements Everywhere

Avatar for Larissa Abreu

Larissa Abreu

November 28, 2018

More Decks by Larissa Abreu

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

Other Decks in Programming

See All in Programming
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
Avatar for jsoizo jsoizo
1
270
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
130
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
Avatar for 武田 憲太郎 kentaroutakeda
3
660
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
210
信頼性について考えてみる（SRE NEXT 2026 miniLT）
Avatar for hayama hayama17
0
240
ルールを書いて終わらせないハーネスエンジニアリング
Avatar for Yuji Yamaguchi yug1224
4
1.8k
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
Avatar for HideyukiKitao panda728
PRO
2
180
20260722_microCMSで考える、AI時代のコンテンツ運用設計
Avatar for Yoshihisa Kaino yosh1
0
340
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
Avatar for ta-hasunuma thasu0123
0
210
仕様駆動開発の消費期限
Avatar for watany watany
7
3.3k
壊れたパーサから始める関数型設計と構成的なパーサ #fp_matsuri
Avatar for ライガー raiga0310
2
440
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
130

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
52k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
480
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.7k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k

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