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吗？

score 2 · Accepted Answer

您不能<slot>仅仅因为命名槽需要将元素与slot属性匹配，就通过命名来分配文本节点。

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

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

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

1 回答 1