Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Custom Elements Everywhere
Search
Larissa Abreu
November 28, 2018
Programming
0
210
Custom Elements Everywhere
Larissa Abreu
November 28, 2018
Tweet
Share
More Decks by Larissa Abreu
See All by Larissa Abreu
Defesa contra as artes das trevas - Github (2020)
larissaabreu
0
250
Sempre teste mas debug se precisar
larissaabreu
2
190
Guia prático para criação de componentes perfeitos
larissaabreu
1
190
JavaScript e o teste filosofal
larissaabreu
0
84
Web Components: fazendo do futuro uma realidade através do JS - Brasília
larissaabreu
0
120
Web Components: fazendo do futuro uma realidade através do JS
larissaabreu
0
72
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
larissaabreu
0
110
Dando poder ao seu CSS através de Custom Properties
larissaabreu
0
100
Componentes nativos: uma chance de mudar o futuro!
larissaabreu
0
200
Other Decks in Programming
See All in Programming
Kotlin 2.0 and Beyond
antonarhipov
2
150
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
600
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
3
790
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
660
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
120
Why Prism?
kddnewton
4
1.7k
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
500
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Scaling GitHub
holman
458
140k
How to name files
jennybc
75
98k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
The Cult of Friendly URLs
andyhume
76
6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Designing the Hi-DPI Web
ddemaree
278
34k
Writing Fast Ruby
sferik
623
60k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Transcript
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>
None
None
None
youtube.com/new
Custom Elements Everywhere custom-elements-everywhere.com/
Thanks! #UseThePlatform @TheSweet_Lari @LarissaAbreu larissaabreu.github.io