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

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插槽中，并在标记更改时相应地进行更新。 有没有好的/综合的方法来做到这一点？我将不得不求助于一个突变观察者吗？

Answer 1

您不能仅通过命名槽来匹配具有<slot>属性的元素，而通过命名slot分配文本节点。

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

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

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