影子DOM全局css繼承可能嗎？

有沒有辦法繼承：主機元素CSS樣式到陰影DOM？原因是，如果我們開始開發Web組件，每個Web組件風格必須在頁面上保持一致。影子DOM全局css繼承可能嗎？

該頁面可以具有全局css，並且此全局css樣式可以繼承到shadow DOM。有::shadow和/deep/，但現在不推薦使用。

或者，這是否對模式？如果是這樣，爲什麼？

我發現這個問題，但似乎過時了。 Can Shadow DOM elements inherit CSS?

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>

來源

2017-10-13 allenhwkim

你有沒有考慮過使用CSS Variables和mixins呢？如果您公開它們，它們將允許您覆蓋或配置組件 –

一個影子DOM的功能是隔離CSS樣式。

因此，如果您希望自定義元素從主頁面繼承樣式，請不要使用Shadow DOM。這不是強制性的。

來源

2017-10-14 00:01:57 Supersharp

影子DOM全局​​css繼承可能嗎？

回答

相關問題

影子DOM全局css繼承可能嗎？