Как использовать родительский CSS из Shadow DOM

У меня есть CSS из родительского приложения, которое я хочу использовать внутри веб-компонента, созданного shadow dom. Я не хочу копировать css из родительского приложения в веб-компонент, но прямо сейчас веб-компонент не может видеть 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>

html css shadow-dom web-content webcontent
person Cledson Araújo    schedule 20.03.2018    source источник
comment
вам действительно нужно использовать shadow dom? если вы хотите повторно использовать css из родительского приложения, вы можете создать веб-компонент без shadow dow (иначе вы должны скопировать или импортировать стиль css)   -  person Supersharp    schedule 24.03.2018

Ответы (1)


arrow_upward
2
arrow_downward

Shadow DOM защищен от внешнего CSS. Это намеренно.

TL;DR:

Если вы хотите, чтобы внешний CSS влиял на DOM внутри shadowRoot настраиваемого элемента, вам необходимо:

  1. Используйте <slot> или
  2. Скопируйте CSS в shadowDOM

Вот три ответа, которые я дал на похожие вопросы:

person Intervalia    schedule 02.04.2018