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
580
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
81
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
330
Jamstack開発者のための App Runner入門
hideokamoto
1
480
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
0
430
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.2k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
190
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
OPENLOGI Company Profile for engineer
hr01
1
34k
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
310
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
240
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
290
Connect 100+を支える技術
kanyamaguc
0
190
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
160
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
210
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
440
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
Geminiとv0による高速プロトタイピング
shinya337
0
250
モバイル界のMCPを考える
naoto33
0
420
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
Speed Design
sergeychernyshev
32
1k
Embracing the Ebb and Flow
colly
86
4.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Docker and Python
trallard
44
3.5k
The Invisible Side of Design
smashingmag
301
51k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
A better future with KSS
kneath
239
17k
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