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
600
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
87
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
340
Jamstack開発者のための App Runner入門
hideokamoto
1
490
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
0
440
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.2k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
200
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.8k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3.2k
Other Decks in Technology
See All in Technology
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
290
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
380
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
120
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
140
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
250
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
480
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
200
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
290
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Gamification - CAS2011
davidbonilla
81
5.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
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