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
260
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
300
Sempre teste mas debug se precisar
larissaabreu
2
230
Guia prático para criação de componentes perfeitos
larissaabreu
1
210
JavaScript e o teste filosofal
larissaabreu
0
94
Web Components: fazendo do futuro uma realidade através do JS - Brasília
larissaabreu
0
130
Web Components: fazendo do futuro uma realidade através do JS
larissaabreu
0
80
Componentes nativos: uma chance de mudar o futuro! - ABCDev 2018
larissaabreu
0
120
Dando poder ao seu CSS através de Custom Properties
larissaabreu
0
110
Componentes nativos: uma chance de mudar o futuro!
larissaabreu
0
210
Other Decks in Programming
See All in Programming
Google Opalで使える37のライブラリ
mickey_kubo
3
150
CSC305 Lecture 10
javiergs
PRO
0
260
Software Architecture
hschwentner
6
2.3k
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
9
1.6k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
550
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
EMこそClaude Codeでコード調査しよう
shibayu36
0
430
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
530
SODA - FACT BOOK(JP)
sodainc
1
8.8k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
900
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.7k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Automating Front-end Workflow
addyosmani
1371
200k
Agile that works and the tools we love
rasmusluckow
331
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Visualization
eitanlees
149
16k
A better future with KSS
kneath
239
18k
For a Future-Friendly Web
brad_frost
180
10k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Fireside Chat
paigeccino
41
3.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How to Ace a Technical Interview
jacobian
280
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
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