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
220
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
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
480
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
9
1.2k
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
130
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
270
Cancel Next.js Page Navigation: Full Throttle
ypresto
1
180
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
410
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
1
130
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.7k
dbt-ga4パッケージを実業務に導入してみた話
t_tokumaru_feedcorp
0
130
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.2k
게임 개발하던 학생이이 세계에선 안드로이드 개발자?
pangmoo
0
110
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
1
610
Featured
See All Featured
In The Pink: A Labor of Love
frogandcode
139
22k
Become a Pro
speakerdeck
PRO
24
4.9k
4 Signs Your Business is Dying
shpigford
180
21k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Unsuck your backbone
ammeep
668
57k
The Mythical Team-Month
searls
218
43k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
BBQ
matthewcrist
85
9.2k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Web Components: a chance to create the future
zenorocha
310
42k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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