如何使用Shadow DOM中的父CSS

Question

我有来自父应用程序的css，我想在shadow dom制作的web组件中使用。我不想将css从父应用程序复制到web-component，但是现在，web组件无法看到父应用程序css，我该怎么做？

std::string

Answer 1

Shadow DOM受到外部CSS的保护。这是按设计。

TL; DR：

如果您希望外部CSS影响自定义元素的shadowRoot中的DOM，则需要：

1. 使用<slot>或
2. 将CSS复制到shadowDOM

以下是我在类似问题上给出的三个答案：

• I have an element that i have declared as a shadow dom but the style is affecting the other elelemts
• Why does my Web Component CSS not show? I am not using shadowDOM
• slot selector limit in webcomponent