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
Shadow DOMで CSSの悪夢に立ち向かう / WebComponents.kyoto ...
Search
Hidetaka Okamoto
March 06, 2018
Technology
0
220
Shadow DOMで CSSの悪夢に立ち向かう / WebComponents.kyoto vol.2
Hidetaka Okamoto
March 06, 2018
Tweet
Share
More Decks by Hidetaka Okamoto
See All by Hidetaka Okamoto
OpenAI APIで API Changelogを要約してみた話 / chatgpt-osaka-1
hideokamoto
0
610
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
89
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
340
Jamstack開発者のための App Runner入門
hideokamoto
1
490
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
0
450
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.2k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
200
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.9k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3.2k
Other Decks in Technology
See All in Technology
React19.2のuseEffectEventを追う
maguroalternative
2
520
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
530
Introdução a Service Mesh usando o Istio
aeciopires
0
220
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
3
240
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
130
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
450
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
0
120
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
170
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2.1k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
280
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Balancing Empowerment & Direction
lara
5
690
Code Reviewing Like a Champion
maltzj
526
40k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Typedesign – Prime Four
hannesfritz
42
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Become a Pro
speakerdeck
PRO
29
5.6k
Transcript
Hidetaka Okamoto Shadow DOMͰ CSSͷѱເʹཱ͔ͪ͏ WebComponents.kyoto Meetup #2
Who are you ? Okamoto Hidetaka ❖ Digitalcube Co. Ltd.
❖ WordCamp Kyoto 2017࣮ߦҕһ ❖ JAWS-UG Kyoto / Kobe ❖ React.kyoto
Agenda ❖ CSSͷ໋໊نଇͷ ❖ ৽໋໊͍͠نଇͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
Agenda ❖ CSSͷ໋໊نଇͷ ❖ ৽໋໊͍͠نଇͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
CSS is global ❖ Կ͕άϩʔόϧʁ ❖ ɹ ❖ ɹ ❖
ɹ
CSS is global ❖ Կ͕άϩʔόϧʁ ɹˠɹ໊લۭ͕ؒάϩʔόϧ ❖ Ϋϥε໊͕ॏෳ͢Δͱ্ॻ͖͞ΕΔ ❖ ελΠϧͷઃఆΛܧঝͰ͖ͳ͍
❖ Ͳ͏ʹ͔ܧঝͰ͖ΔΑ͏ʹ͍ͨ͠ → ϓϦϓϩηοα ❖ ࠶ར༻ੑͷ͋ΔCSSΛॻ͖͍ͨ → ໋໊نଇ
CSS ϓϦϓϩηοα ❖ SassLess / PostCSSͳͲ ❖ CSSͰܧঝมͷར༻ͳͲΛͰ͖ΔΑ͏ʹ͢Δ ❖ ຊདྷͳΒͦͷ··͑ͳ͍ॻ͖ํʹͳΔ
❖ Ruby (Sass)Node.js (PostCSS)Ͱͷม͕ඞཁ
໋໊نଇ ❖ CSSΛద༻͢ΔΫϥε໊ͷ໋໊ϧʔϧ ❖ OOCSS / BEM / SMACSSͳͲ ❖
ػೳੑ࣭ʹ߹Θ໊ͤͨલΛͦΕͧΕ͚͍ͭͯ͘ ❖ CSSϓϦϓϩηοαͱΈ߹ΘͤΔͷ͕σϑΝΫτ
Α͋͘Δέʔε <div class="panel bordered wide”> OOCSSͰॻ͍ͨίʔυ </div> <style> .panel {
padding: 20px; } .bordered { border: 1px solid #fff; } .wide { max-width: 100%; } </style>
Α͋͘Δέʔε <div class="outer"> <div class="boilerplate">Hi! My name is</div> <div class="name">Bob</div>
</div> <style> .outer {} .boilerplate {} .name {} </style>
ΊΜͲ͍
Զͨͩɺ ͜ͷจࣈΛ͘ ͍͚ͨͩ͠ͳͷ ʹɾɾɾ
Agenda ❖ CSSͷ໋໊نଇͷ ❖ ৽໋໊͍͠نଇͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
ͳͥCSS͘͜͠ͳΔʁ ❖ Өڹൣғ͕άϩʔόϧʢશମΛߟྀ͢Δඞཁ͕͋Δʣ ❖ ܧঝ͕Ͱ͖ͳ͍ʢॏෳͷେྔൃੜʣ ❖ ελΠϧͷͨΊͷdiv͕େྔൃੜ͢Δ
͡Ό͋͜ΕΒΛͳ͍͍ͤ͘ ❖ Өڹൣғ͕άϩʔόϧʢશମΛߟྀ͢Δඞཁ͕͋Δʣ ❖ ܧঝ͕Ͱ͖ͳ͍ʢॏෳͷେྔൃੜʣ ❖ ελΠϧͷͨΊͷdiv͕େྔൃੜ͢Δ
https://www.w3.org/TR/shadow-dom/ Shadow DOM ͋ͨΒ͍͠HTMLͷ̍ཁૉ
Shadow DOMͰͳʹ͕͔ΘΔʁ ❖ ӨڹൣғΛߜΓࠐΉʢશମΛߟྀ͠ͳͯ͘ࡁΉʣ ❖ Custom ElementͰܧঝՄೳʢDRYʣ ❖ ελΠϧͷͨΊͷϚʔΫΞοϓΛӅಗ͢Δ
Agenda ❖ CSSͷ໋໊نଇͷ ❖ ৽໋໊͍͠نଇͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
͘ͳΔͷͲͬͪʁ <div id=“root”><h3>Light DOM</h3></div> <section><h3>nomal dom</h3></section> <script> let root =
document.querySelector('#root').createShadowRoot(); root.innerHTML = '<style>h3{ color: red; }</style>' + '<h3>Shadow DOM</h3>'; </script>
ਖ਼ղ <div id=“root”><h3>Light DOM</h3></div> <section><h3>nomal dom</h3></section> <script> let root =
document.querySelector('#root').createShadowRoot(); root.innerHTML = '<style>h3{ color: red; }</style>' + '<h3>Shadow DOM</h3>'; </script>
Shadow DOMͷத͚ͩ DOM͝ͱஔ͖͑ΒΕ͍ͯΔ
<content>Λ͔ͭ͏ͱ <div id=“root”><h3>Light DOM</h3></div> <section><h3>nomal dom</h3></section> <script> let root =
document.querySelector('#root').createShadowRoot(); root.innerHTML = '<style>h3{ color: red; }</style>' + ‘<content/>'; </script>
ݩͷHTML͕ग़Δ ͨͩ͠CSS͕ ͋ͨΒͳ͘ͳͬͨ
ϗετཁૉͳͷͰɺ:hostΛ͏ <div id=“root”><h3>Light DOM</h3></div> <section><h3>nomal dom</h3></section> <script> let root =
document.querySelector('#root').createShadowRoot(); root.innerHTML = ‘<style>:host { color: red; }</style>' + ‘<content/>'; </script>
ݩͷHTMLʹCSSΛ :hostͰ ϗετཁૉʹCSS͕͚ͭΕΔ
ͨͩ͠ϗετશମʹ :host h3ͷΑ͏ʹͰ͖ͳ͍
selectͰ໌ࣔతʹ <div id=“root”><h3>Light DOM</h3></div> <section><h3>nomal dom</h3></section> <script> let root =
document.querySelector('#root').createShadowRoot(); root.innerHTML = ‘<style>content[select="h3"]::content > h3 { color: red; }</style>' + ‘<div><content select="h3"></content><content select="p"/></div>'; </script>
͜ΕͰh3͚ͩ৭ʹ :hostͰ ϗετཁૉʹCSS͕͚ͭΕΔ
͕࣌ؒ͋ΕσϞΛ͢Δ
Agenda ❖ CSSͷ໋໊نଇͷ ❖ ৽໋໊͍͠نଇͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
Shadow DOMͰղܾ͢Δ͜ͱ ❖ CSSͷมߋʹΑΔӨڹൣғΛߜΓࠐΉ͜ͱ͕Ͱ͖Δ ❖ ০ͷͨΊͷHTMLΛॻ͔ͳͯ͘ࡁΉ ❖ CSSͷ໋໊نଇΛ͋·Γҙࣝ͠ͳͯ͘ॻ͚Δ
Shadow DOMͰղܾ͢Δ͜ͱ ❖ CSSͷมߋʹΑΔӨڹൣғΛߜΓࠐΉ͜ͱ͕Ͱ͖Δ ❖ ০ͷͨΊͷHTMLΛॻ͔ͳͯ͘ࡁΉ ❖ CSSͷ໋໊نଇΛ͋·Γҙࣝ͠ͳͯ͘ॻ͚Δ
άϩʔόϧͳͷCSS͚ͩʁ
<h1> HTMLλάͷ໊લ<br/> άϩʔόϧ </h1>
͓ͦΒ͘ى͖Δ͜ͱ <div> <x-my-special-content>͜Εͱ</x-my-special-content> <x-some-special-cnt>͜Ε</x-some-special-cnt> <another-element>͕͍ͪͳʹʁ</another-element> </div>
Shadow DOMͷͦͷઌ ❖ CSSͷ໋໊نଇ͋·Γҙࣝ͠ͳͯ͘Α͘ͳΔ ❖ ͨͩ͠HTMLλά(Custom Element)ͰϋϚΔ ❖ HTMLλάͷ໋໊نଇ͕͓ͦΒ͘ཚཱ͢Δ ❖
ͨͩ͠ܧঝ͕Ͱ͖ΔɺCSSΑΓѻ͍͍ͣ͢
༨ܭͳϚʔΫΞοϓͳ͠Ͱɺ ࣗͷ࡞Γ͍ͨViewΛ࡞Γग़͢ <name-tag> Bob </name-tag> https://www.html5rocks.com/ja/tutorials/ webcomponents/shadowdom/
ࢀߟʹͨ͠ࢿྉ ❖ https://www.html5rocks.com/ja/tutorials/ webcomponents/shadowdom/ ❖ https://www.html5rocks.com/ja/tutorials/ webcomponents/shadowdom-201/ ❖ https://developers.google.com/web/fundamentals/ web-components/shadowdom?hl=ja