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
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
Practical Agentic AI in Software Engineering
uzyn
0
110
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.1k
「Linux」という言葉が指すもの
sat
PRO
4
140
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
170
20250913_JAWS_sysad_kobe
takuyay0ne
2
240
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
160
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
KotlinConf 2025_イベントレポート
sony
1
140
テストを軸にした生き残り術
kworkdev
PRO
0
210
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Docker and Python
trallard
46
3.6k
Automating Front-end Workflow
addyosmani
1370
200k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
What's in a price? How to price your products and services
michaelherold
246
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A Tale of Four Properties
chriscoyier
160
23k
BBQ
matthewcrist
89
9.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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