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

Question

Как использовать родительский 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>

4

html css shadow-dom web-content webcontent

Источник

user5237376 20 мар '18 в 18:50

1 ответ

Решение

Другие вопросы по тегам html css shadow-dom web-content webcontent

user1253074 02 апр '18 в 19:56 2018-04-02 19:56 · Accepted Answer · 2018-04-02 19:56

Shadow DOM защищен от внешних CSS. Это по замыслу.

TL; DR:

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

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

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