时间戳

首页 > 解决方案 > Svelte Web 组件 - 样式化 Slotted HTML 标签

web-component - Svelte Web 组件 - 样式化 Slotted HTML 标签

问题描述

有没有办法在影子根中包含开槽的 html 标记？默认开槽标签在 Shadow Root 外部呈现，而在其中有对它们的引用。我的目标是使用 customElement 范围样式（alert.css）来设置开槽标签的样式。

索引.html

<custom-alert types="col-5 btn-default" name="alert">
    <h3 slot="slotname">I'm not blue :(</h3>
    <p slot="slotname">Nullam pretium neque a risus tincidunt, et semper augue.</p>
</custom-alert>

alert.svelte

<style>
    @import "../css/alert.css";
</style>

<div class="alert">
    <div>
        <slot name="slotname"></slot>
        <h3>Yes I'm Blue :)</h3>
    </div>
    <i class="bi bi-x" data-bs-dismiss="alert" aria-label="Close" role="button"></i>
</div>

标签： web-componentsvelte

解决方案

您可以在父组件中设置子组件的样式。这也适用于插槽。这可以这样实现（在示例中，插槽内的跨度被设置为具有白色文本颜色）：

<style>
  .parent {
    width: 50px;
    background-color: red;
    height: 50px;
  }
  
  .parent :global(span) {
    color: white;
  }
</style>

<div class="parent">
  <slot/>
</div>

您可以在 REPL 中使用此示例：https ://svelte.dev/repl/98d2511bf24c41758b5d4520e000a74d?version=3.37.0

推荐阅读