我正在创建一些 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吗?
最佳答案
您不能通过命名 <slot>
分配文本节点仅仅因为一个命名槽需要匹配一个带有 slot
的元素。属性。
因此,您至少需要将文本嵌入到元素中:
<my-element>
<span slot="label">some text</span>
</my-element>
或者,一个未命名的
<slot>
可以匹配所有轻量级的 DOM 内容,包括文本节点。
关于javascript - 如何将自定义元素的文本内容分配给模板槽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58386474/