如何使用 Shadow DOM 中的父 CSS
How to use parent CSS from Shadow DOM
我有来自父应用程序的 css，我想在由 shadow dom 制作的网络组件中使用。我不想将 css 从父应用程序复制到 Web 组件，但现在 Web 组件看不到父应用程序 css，我该怎么做？
parent app:
<style>
.pretty-button {
color: green
}
</style>
<body>
<button class="pretty-button">Got It</button>
<custom-element></custom-element>
</body>
web-component made by shadow dom:
<!--doesn't work because the shadow dom can't use parent css class-->
<body>
<button class="pretty-button">Got it from shadow dom</button>
</body>
影子 DOM 受到外界保护 CSS。这是设计。
长话短说：
如果你想让外部 CSS 影响自定义元素的 shadowRoot 内部 DOM 那么你需要：
- 使用
<slot>或
- 将CSS复制到阴影中DOM
以下是我对类似问题给出的三个答案：
- I have an element that i have declared as a shadow dom but the style is affecting the other elelemts
我有来自父应用程序的 css，我想在由 shadow dom 制作的网络组件中使用。我不想将 css 从父应用程序复制到 Web 组件，但现在 Web 组件看不到父应用程序 css，我该怎么做？
parent app:
<style>
.pretty-button {
color: green
}
</style>
<body>
<button class="pretty-button">Got It</button>
<custom-element></custom-element>
</body>
web-component made by shadow dom:
<!--doesn't work because the shadow dom can't use parent css class-->
<body>
<button class="pretty-button">Got it from shadow dom</button>
</body>
影子 DOM 受到外界保护 CSS。这是设计。
长话短说：
如果你想让外部 CSS 影响自定义元素的 shadowRoot 内部 DOM 那么你需要：
- 使用
<slot>或 - 将CSS复制到阴影中DOM
以下是我对类似问题给出的三个答案：
- I have an element that i have declared as a shadow dom but the style is affecting the other elelemts