Как назначить текстовое содержимое пользовательского элемента в слот шаблона?

Question

Я создаю несколько веб-компонентов и хотел бы вставить содержащийся в них текст в слот шаблона. Я хотел бы сделать его слот-слотом, а не просто копировать их значение, чтобы браузер мог естественно обрабатывать изменения в тексте, вместо того, чтобы пропустить его через сам компонент.

В соответствии с текстовыми узлами MDN могут быть слот-слотами, однако я не могу найти никаких реальных средств сделать это, кроме устаревшего элемента из v1. (textNodes не поддерживают атрибуты, поэтому я не могу просто назначить ему слот таким образом, и .assignedSlot () только для чтения.) Поддержка вне документации довольно минимальна, хотя этого следует ожидать от такой новой технологии.

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

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

Используя этот упрощенный пример, я бы хотел, чтобы some text появился в слоте label и соответственно обновлялся при изменении разметки. Есть ли хороший / интегрированный способ сделать это? Придется ли мне прибегать к мутации Observer?

Answer 1

Нельзя назначить текстовый узел через именованный <slot> просто потому, что именованный слот требует соответствия элемента с атрибутом slot.

Как следствие, вам нужно будет встроить текст как минимум в элемент:

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

В качестве альтернативы, безымянный <slot> может соответствовать всему легкому DOM-содержимому, включая текстузлы.