如何使用 Shadow DOM 中的父 CSS答案

【问题标题】：How to use parent CSS from Shadow DOM如何使用 Shadow DOM 中的父 CSS
【发布时间】：2018-08-29 17:32:24
【问题描述】：

我有来自父应用程序的 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>

【问题讨论】：

你真的需要使用shadow dom吗？如果你想重用父应用的 css，你可以创建没有 shadow dow 的 web 组件（否则你必须复制或导入 css 样式）

标签： html css shadow-dom web-content webcontent

【解决方案1】：

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

TL;DR:

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

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

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

【讨论】：