html - 如何使用 Shadow DOM 中的父 CSS

Question

我有来自父应用程序的 css，我想在 shadow dom 制作的 web 组件中使用它。我不想将 css 从父应用程序复制到 web-component，但是现在 web-component 看不到父应用程序 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>

score 2 · Accepted Answer

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

TL;博士：

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

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

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

html - 如何使用 Shadow DOM 中的父 CSS

1 回答 1

Related

Reference