Shadow DOM
>#WIP
それにより、カスタム要素のマークアップ構造、スタイル、および動作をページ上の他のコードから分離し、コンフリクトが起きないようにすると同時に、コードを綺麗に保つことができます
Shadow DOM API を使用すると、指定された要素に隠されたDOMツリー（シャドウツリー）をアタッチすることもできます
DOMをカプセル化する
JavaScriptやCSSのscopeを作る
外部からの影響を受けない
継承されないってことか
CSS Custom Propertyなら外からstyleを加えられる
良いのか #??
Reactのpropsみたいなイメージか？
外部へ影響しない
カプセル化したDOMのroot
jsconst div = document.getElementById('area');
const shadowRoot = div.attachShadow({ mode: 'open' });通常のDOMであり、Shadow Rootをぶら下げる部分のDOM
Shadow DOMとCustom Elementの指しているものの違いがわからん
html<style>
.pink {
--color: pink;
}
</style>
<my-button class="pink">my button</my-button>cssbutton {
background-color: var(--color);
}
カプセル化された「シャドウ」 DOM ツリーを要素に紐付け、関連する機能を制御するための、一連の JavaScript API
シャドウ DOM ツリーは、メイン文書の DOM とは別にレンダリングされる
こうして、要素の機能を公開せずに済み、文書の他の部分との重複を恐れることなく、スクリプト化やスタイル化できる
ReactのComponentみたいなもの #??
html<div id="area" style="border: 1px solid #666666">
<p>Hello, world!</p>
</div>jsconst div = document.getElementById('area');
// divにShadow Rootをアタッチする
const shadowRoot = div.attachShadow({ mode: 'open' });
// Shadow Rootの中身を書く
shadowRoot.innerHTML = `
<style>
p {
border: 1px solid red;
}
</style>
<p>↓↓↓↓↓</p>
<slot></slot>
<p>↑↑↑↑↑</p>
`;↑こう書いた時に、↓こういうイメージのものになる
html<div id="area" style="border: 1px solid #666666">
<style>
p {
border: 1px solid red;
}
</style>
<p>↓↓↓↓↓</p>
<p>Hello, world!</p>
<p>↑↑↑↑↑</p>
</div>ただし、この
p {..} のstyleは、 <p>Hello, world!</p> に対しては適用されないslotで埋め込んだものに対しては適用されない
styled-componentsってこうなってたっけ？
styleの指定の仕方にもよるけど、普通はそうなってるか。
>これがあれば、Web ComponentsベースのCSS in JSでSSRをうまいことできるからです（逆に言えば、これがないとWeb ComponentsのSSRが結構厳しいです）。 ref
どういうもの？
JSが必須？
何が嬉しい？
Custom Elementとは別概念ということは、Custom Elment onlyだと外界に影響するのか？
React Componentはこれらを内包していると思うが、なぜ別概念なの？