javascript - 如何将自定义元素的文本内容分配给模板槽？

Question

我正在创建一些 Web 组件，并希望将包含的文本插入到模板槽中。我想让它成为可插入的，而不是简单地复制它们的值，这样浏览器就可以自然地处理对文本的更改，而不必通过组件本身传递它。

根据 MDN，textNodes 是可插槽的，但是除了 v1 中已弃用的元素之外，我找不到任何真正的方法来做到这一点。 (textNodes 不支持属性，所以我不能简单地为它分配一个插槽，并且 .assignedSlot() 是只读的。)文档之外的支持非常少，尽管这是一种新技术的预期.

<my-element>some text</my-element>

<template>
 <h3><slot name="label"></slot></h3>
 <p>Derp</p>
</template>

用这个作为一个简化的例子，我想要 some text出现在 label插槽，并在标记更改时相应更新。
有没有一种好的/综合的方法来做到这一点？我必须求助于mutationObserver吗？

Answer 1

您不能通过命名 <slot> 分配文本节点仅仅因为一个命名槽需要匹配一个带有 slot 的元素。属性。

因此，您至少需要将文本嵌入到元素中:

<my-element>
    <span slot="label">some text</span>
</my-element>

或者，一个未命名的 <slot>可以匹配所有轻量级的 DOM 内容，包括文本节点。