不显示 web-component 插槽内容

Question

我正在使用 svelte 构建自定义元素。下面是精简的组件内容

<template>
    <slot name="description">{ description }</slot>
    <slot name="days">
        { padTime(Math.max(time.days, 0)) }
    </slot>
    <slot name="hours">
        { padTime(Math.max(time.hours, 0)) }
    </slot>
    <slot name="minutes">
        { padTime(Math.max(time.minutes, 0)) }
    </slot>
    <slot name="seconds">
        { padTime(Math.max(time.seconds, 0)) }
    </slot>
</template>

虽然时间相关的广告位得到了很好的更新，但由于某种原因，描述广告位没有更新。

在shadow DOM中更新的很好，但是没有显示出来：

Answer 1

您放入插槽中的内容是该插槽的后备内容 - 只有在没有任何内容传递到插槽时才会显示。在您的示例中，您将<div slot="description">Test</div> 放在描述槽中，因此不显示后备“预售开始于”。对于其他插槽，您不会将内容传递给它们，因此它们会显示后备内容。

如果您总是希望显示组件内的内容并且不想从组件外传入任何元素，则可能根本不需要在此处使用插槽。

<template>
    <div>{ description }</slot>
    <div>
        { padTime(Math.max(time.days, 0)) }
    </div>
    <div>
        { padTime(Math.max(time.hours, 0)) }
    </div>
    <div>
        { padTime(Math.max(time.minutes, 0)) }
    </div>
    <div>
        { padTime(Math.max(time.seconds, 0)) }
    </div>
</template>