Shadow DOMで CSSの悪夢に立ち向かう / WebComponents.kyoto vol.2

Transcript

1. Hidetaka Okamoto Shadow DOMͰ CSSͷѱເʹཱͪ޲͔͏ WebComponents.kyoto Meetup #2
2. Who are you ? Okamoto Hidetaka ❖ Digitalcube Co. Ltd. ❖ WordCamp Kyoto 2017࣮ߦҕһ௕ ❖ JAWS-UG Kyoto / Kobe ❖ React.kyoto
3. Agenda ❖ CSSͷ໋໊نଇͷ࿩ ❖ ৽໋໊͍͠نଇ΁ͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
4. Agenda ❖ CSSͷ໋໊نଇͷ࿩ ❖ ৽໋໊͍͠نଇ΁ͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
5. CSS is global ❖ Կ͕άϩʔόϧʁ ❖ ɹ ❖ ɹ ❖ ɹ
6. CSS is global ❖ Կ͕άϩʔόϧʁ ɹˠɹ໊લۭ͕ؒάϩʔόϧ ❖ Ϋϥε໊͕ॏෳ͢Δͱ্ॻ͖͞ΕΔ ❖ ελΠϧͷઃఆΛܧঝͰ͖ͳ͍ ❖ Ͳ͏ʹ͔ܧঝͰ͖ΔΑ͏ʹ͍ͨ͠ → ϓϦϓϩηοα ❖ ࠶ར༻ੑͷ͋ΔCSSΛॻ͖͍ͨ → ໋໊نଇ
7. CSS ϓϦϓϩηοα ❖ Sass΍Less / PostCSSͳͲ ❖ CSSͰܧঝ΍ม਺ͷར༻ͳͲΛͰ͖ΔΑ͏ʹ͢Δ ❖ ຊདྷͳΒͦͷ··࢖͑ͳ͍ॻ͖ํʹͳΔ ❖ Ruby (Sass)΍Node.js (PostCSS)Ͱͷม׵͕ඞཁ
8. ໋໊نଇ ❖ CSSΛద༻͢ΔΫϥε໊ͷ໋໊ϧʔϧ ❖ OOCSS / BEM / SMACSSͳͲ ❖ ػೳ΍ੑ࣭ʹ߹Θ໊ͤͨલΛͦΕͧΕ͚͍ͭͯ͘ ❖ CSSϓϦϓϩηοαͱ૊Έ߹ΘͤΔͷ͕σϑΝΫτ
9. Α͋͘Δέʔε <div class="panel bordered wide”> OOCSSͰॻ͍ͨίʔυ </div> <style> .panel { padding: 20px; } .bordered { border: 1px solid #fff; } .wide { max-width: 100%; } </style>
10. Α͋͘Δέʔε <div class="outer"> <div class="boilerplate">Hi! My name is</div> <div class="name">Bob</div> </div> <style> .outer {} .boilerplate {} .name {} </style>
11. ΊΜͲ͍
12. Զ͸ͨͩɺ ͜ͷจࣈΛ੺͘ ͍͚ͨͩ͠ͳͷ ʹɾɾɾ
13. Agenda ❖ CSSͷ໋໊نଇͷ࿩ ❖ ৽໋໊͍͠نଇ΁ͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
14. ͳͥCSS͸΍΍͘͜͠ͳΔʁ ❖ Өڹൣғ͕άϩʔόϧʢશମΛߟྀ͢Δඞཁ͕͋Δʣ ❖ ܧঝ͕Ͱ͖ͳ͍ʢॏෳͷେྔൃੜʣ ❖ ελΠϧͷͨΊͷdiv͕େྔൃੜ͢Δ
15. ͡Ό͋͜ΕΒΛͳͤ͘͹͍͍ ❖ Өڹൣғ͕άϩʔόϧʢશମΛߟྀ͢Δඞཁ͕͋Δʣ ❖ ܧঝ͕Ͱ͖ͳ͍ʢॏෳͷେྔൃੜʣ ❖ ελΠϧͷͨΊͷdiv͕େྔൃੜ͢Δ
16. https://www.w3.org/TR/shadow-dom/ Shadow DOM ͋ͨΒ͍͠HTMLͷ̍ཁૉ
17. Shadow DOMͰͳʹ͕͔ΘΔʁ ❖ ӨڹൣғΛߜΓࠐΉʢશମΛߟྀ͠ͳͯ͘ࡁΉʣ ❖ Custom ElementͰܧঝՄೳʢDRYʣ ❖ ελΠϧͷͨΊͷϚʔΫΞοϓΛӅಗ͢Δ
18. Agenda ❖ CSSͷ໋໊نଇͷ࿩ ❖ ৽໋໊͍͠نଇ΁ͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
19. ੺͘ͳΔͷ͸Ͳͬͪʁ <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>
20. ਖ਼ղ <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>
21. Shadow DOMͷத͚ͩ DOM͝ͱஔ͖׵͑ΒΕ͍ͯΔ
22. <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>
23. ݩͷHTML͕ग़Δ ͨͩ͠CSS͕ ͋ͨΒͳ͘ͳͬͨ
24. ϗετཁૉͳͷͰɺ: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>
25. ݩͷHTMLʹCSSΛ :hostͰ ϗετཁૉʹCSS͕͚ͭΕΔ
26. ͨͩ͠ϗετશମʹ :host h3ͷΑ͏ʹ͸Ͱ͖ͳ͍
27. 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>
28. ͜ΕͰh3͚ͩ੺৭ʹ :hostͰ ϗετཁૉʹCSS͕͚ͭΕΔ
29. ͕࣌ؒ͋Ε͹σϞΛ͢Δ
30. Agenda ❖ CSSͷ໋໊نଇͷ࿩ ❖ ৽໋໊͍͠نଇ΁ͷରԠํ๏ ❖ αϯϓϧίʔυ ❖ ͦͷઌʹ͋Δ৽͍͠ѱເ
31. Shadow DOMͰղܾ͢Δ͜ͱ ❖ CSSͷมߋʹΑΔӨڹൣғΛߜΓࠐΉ͜ͱ͕Ͱ͖Δ ❖ ૷০ͷͨΊͷHTMLΛॻ͔ͳͯ͘΋ࡁΉ ❖ CSSͷ໋໊نଇΛ͋·Γҙࣝ͠ͳͯ͘΋ॻ͚Δ
32. Shadow DOMͰղܾ͢Δ͜ͱ ❖ CSSͷมߋʹΑΔӨڹൣғΛߜΓࠐΉ͜ͱ͕Ͱ͖Δ ❖ ૷০ͷͨΊͷHTMLΛॻ͔ͳͯ͘΋ࡁΉ ❖ CSSͷ໋໊نଇΛ͋·Γҙࣝ͠ͳͯ͘΋ॻ͚Δ
33. άϩʔόϧͳͷ͸CSS͚ͩʁ
34. <h1> HTMLλάͷ໊લ΋<br/> άϩʔόϧ </h1>
35. ͓ͦΒ͘ى͖Δ͜ͱ <div> <x-my-special-content>͜Εͱ</x-my-special-content> <x-some-special-cnt>͜Ε</x-some-special-cnt> <another-element>͕͍ͪ͸ͳʹʁ</another-element> </div>
36. Shadow DOMͷͦͷઌ ❖ CSSͷ໋໊نଇ͸͋·Γҙࣝ͠ͳͯ͘Α͘ͳΔ ❖ ͨͩ͠HTMLλά(Custom Element)ͰϋϚΔ ❖ HTMLλάͷ໋໊نଇ͕͓ͦΒ͘ཚཱ͢Δ ❖ ͨͩ͠ܧঝ͕Ͱ͖Δ෼ɺCSSΑΓ͸ѻ͍΍͍͢͸ͣ
37. ༨ܭͳϚʔΫΞοϓͳ͠Ͱɺ ࣗ෼ͷ࡞Γ͍ͨViewΛ࡞Γग़͢ <name-tag> Bob </name-tag> https://www.html5rocks.com/ja/tutorials/ webcomponents/shadowdom/
38. ࢀߟʹͨ͠ࢿྉ ❖ 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