Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Web Components

Avatar for Guilherme Scotti Guilherme Scotti
November 26, 2019
Technology
41
0

Web Components

Avatar for Guilherme Scotti

Guilherme Scotti

November 26, 2019

More Decks by Guilherme Scotti

See All by Guilherme Scotti
JavaScript the tough parts 25min
Avatar for Guilherme Scotti scottibr
0
34
JavaScript the thought parts
Avatar for Guilherme Scotti scottibr
0
65

Other Decks in Technology

See All in Technology
Temporal 最高!でも改めて「日付」について調べたら人類の負債すぎる件
Avatar for Riya Amemiya riyaamemiya
0
150
継続的なAIコスト最適化
Avatar for Atsushi Tanaka bgpat
1
340
M5Stackで作る BLEマウス GPSログの世界
Avatar for tomokusaba tomokusaba
0
420
スキマバイトという雇用形態は存在しないので、雇用期間1日のアルバイト契約を事業者とワーカーが結ぶ手続きを支えるのがタイミーなんです
Avatar for しが あきとし(akitoshiga) akitoshiga
0
200
DevelopersIO 2026 知識の地図を描く ─ オントロジーとは何か？
Avatar for Satoru Ishikawa ishikawa_satoru
1
1.7k
会社説明資料
Avatar for パーソル＆サーバーワークス株式会社 persolserverworks
0
9.8k
実践！Cloud Run ハンズオン！！ / Cloud Run handson
Avatar for y-ohgi y0hgi
2
280
How to Design Configuration for Rails Applications
Avatar for Shinichi Maeshima willnet
1
770
JAWSUG TOHOKU 青森支部 「LoGoチャット」のAWS移行で 乗り越えたこと
Avatar for たけだ taketakekaho
0
330
20261017福岡devIO 「AIは"良いダッシュボード"を作れるか？
Avatar for 武田 jtakeda
0
140
AI導入は済んだ。次は統制を作り替える番だ_AI×開発組織 Summit 2026
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
210
「Docker Desktop不要の時代」は 来たのか？
Avatar for ueponx ueponx
0
770

Featured

See All Featured
How to make the Groovebox
Avatar for あそなす asonas
2
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
910
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
BBQ
Avatar for Matthew Crist matthewcrist
90
10k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
520
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.9k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
12k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3.1k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
300
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k

Transcript

  1. Web Components. scottiBR guilhermescotti Guilherme Scotti

  2. Web Components. scottiBR guilhermescotti Mineiro 25 anos Eng. Software Guilherme

    Scotti

  3. Datepicker

  4. None

  5. Share UI Components

  6. Design System

  7. None

  8. Web Components Web Components • Custom Elements • HTML Templates

    • Shadow DOM • HTML Modules

  9. WebVR a-frame

  10. None

  11. Custom Elements

  12. None
  13. None
  14. None

  15. Properties X Attributes

  16. None
  17. None

  18. connectedCallback ≈ componentDidMount() disconnectedCallback ≈ componentWillUnmount()

  19. HTML Templates Shadow DOM

  20. None

  21. • Isolated DOM • Scoped CSS • Simplifies CSS

  22. None
  23. None
  24. None
  25. None

  26. Adoption

  27. None
  28. None
  29. None
  30. None

  31. https://custom-elements-everywhere.com/

  32. None

  33. Good Design System • Backwards Compatibility • Not limited by

    framework • Developer Experience • It’s just HTML CSS JS • Cross-browser reusable components Good Design System

  34. Thank You Questions? scottiBR guilhermescotti Slides e Referências bit.ly/web-c-slides FeedBack

    bit.ly/web-c-feedback