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

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

Согласно 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?


javascript native-web-component
person swyrl    schedule 15.10.2019    source источник
comment
Не столько ответ, сколько обновление - мне удалось реализовать это с помощью самонаблюдающего наблюдателя мутаций, хотя я все еще ищу более элегантный метод, если это возможно.   -  person swyrl    schedule 15.10.2019
comment
нельзя использовать безымянный слот?   -  person Supersharp    schedule 15.10.2019
comment
Это работает, спасибо! Я нигде не видел этого в документации, поэтому спасибо, что обратил на это мое внимание!   -  person swyrl    schedule 15.10.2019

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

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

person Supersharp    schedule 16.10.2019