Стиль элементов слота из родительского компонента - PullRequest
Новая
       4

Стиль элементов слота из родительского компонента

2 голосов
/ 16 июня 2019

Я бы хотел, чтобы компонент применял определенные стили к элементам, которые передаются в свойстве slot .

Пример:

Component.svelte 

<style>
  h1 { color: blue }
  p { color: grey }
</style>

<div>
  <slot></slot>
</div>

Тогда мы бы включили элемент 

<script>
  include Component from './component.svelte'
</script>

<Component>
  <h1>My component</h1>
  <p>Lorum Ipsum</p>
</Component>

И результат будет: 

h1 { color: blue }
p { color: grey }
<div>
  <h1>My component</h1>
  <p>Lorum Ipsum</p>
</div>

1 Ответ

4 голосов
/ 16 июня 2019

Вы можете использовать модификатор :global вместе с селектором div, чтобы по существу сказать, что любой тег h1 или p внутри div этого компонента должен быть стилизован.

Пример ( REPL ) 

<!-- Component.svelte -->
<style>
  div :global(h1) { color: blue; }
  div :global(p) { color: grey; }
</style>

<div>
  <slot></slot>
</div>
...