gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:47:58 28 4
gpt4 key购买 nike

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

最佳答案

Shadow DOM 不受外部 CSS 的影响。这是设计的

长话短说:

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

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

以下是我对类似问题给出的三个答案:

关于html - 如何使用 Shadow DOM 的父级 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49392066/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com