3
継承する方法はありますか：ホスト要素のCSSスタイルをシャドーDOMに挿入しますか？ Webコンポーネントの開発を開始するのは、各Webコンポーネントのスタイルがページ上で一貫していなければならないからです。影のDOMグローバルCSSの継承が可能ですか？
ページにはグローバルCSSがあり、このグローバルCSSスタイルはシャドウDOMに継承できます。 ::shadowと/deep/がありましたが、廃止されました。
または、これはパターンですか？もしそうなら、なぜですか？
私はこのQ/Aを見つけましたが、私にとっては時代遅れです。シャドウDOMの機能の Can Shadow DOM elements inherit CSS?
http://plnkr.co/edit/qNSlM0?p=preview
const el = document.querySelector('my-element');
el.attachShadow({mode: 'open'}).innerHTML = `
<!-- SEE THIS 'red' is not red -->
<p class="red">This is defined in Shadow DOM. I want this red with class="red"</p>
<slot></slot>
`;.red {
padding: 10px;
background: red;
font-size: 25px;
text-transform: uppercase;
color: white;
}<!DOCTYPE html>
<html>
<head>
<!-- web components polyfills -->
<script src="//unpkg.com/@webcomponents/custom-elements"></script>
<script src="//unpkg.com/@webcomponents/webcomponentsjs"></script>
<script src="//unpkg.com/@webcomponents/shadydom"></script>
<script src="//unpkg.com/@webcomponents/[email protected]/apply-shim.min.js"></script>
</head>
<body>
<div>
<p class="red">I'm outside the element (big/white)</p>
<my-element>
<p class="red">Light DOM content is also affected.</p>
</my-element>
<p class="red">I'm outside the element (big/white)</p>
</div>
</body>
</html>
代わりにCSS変数とミックスインを使用することを検討しましたか？それらを公開すると、コンポーネントを上書きまたは構成することができます –