父组件的样式插槽元素

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选择器一起使用，从本质上说，该组件h1中的任何p或div标签都应样式。

示例（REPL）

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

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