Shadow DOMの勉強

スクラップのことを忘れてたので、既に調べた内容をコメントしていく。

shadow DOMの使い方。
https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM

イメージが掴みやすい。
Reactとかでカスタムコンポーネントを作るイメージ？
https://qiita.com/s-yoshida/items/056c23b1dc25e0ac7555

Template や slotはまんまVueだなって感じた。

shadow DOMはstyleとかが干渉されないっぽいので、本当にReactのコンポーネントっぽい。(カプセル化)

shadow DOMのことを調べてたらWebComponentを知らないといけなかった。
とりあえずサンプルを作成。
Github
デモ

WebComponentってSEO的にはどうなんだろう。

ちゃんと書けば流石にGoogleでは大丈夫そう？
https://medium.com/patternfly-elements/web-components-and-seo-58227413e072

あとはここも見た。
https://qiita.com/alangdm/items/cec32f21151a9da3c3f2

https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_templates_and_slots