来自父组件的样式插槽元素

Question

我想让一个组件将某些样式应用到在 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>

Answer 1

您可以将 :global 修饰符与 div 选择器一起使用，实质上表示此 div 内的任何 h1 或 p 标记组件应该有样式。

示例 (REPL)

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

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

Style slot elements from parent component