Перераспределить повторяющиеся элементы слота во вложенной теневой DOM

Question

Справочная информация: этот вопрос относится к разработке расширения для последних версий Chrome. Он опирается на функции javascript, такие как импорт HTML и пользовательские элементы, которые доступны не во всех браузерах, но это нормально для этого случая.

Я пытаюсь реализовать пользовательский элемент HTML, упрощенный следующим образом:

<custom-el>
    <span slot="head">Great</span>

    <span slot="item">Item one</span>
    <span slot="item">Item two</span>

    <span slot="foot">done</span>
</custom-el>

Я регистрирую <custom-el>, Каждый раз, когда элемент создается, класс пользовательских элементов моего кода присоединяет теневой корень и добавляет к содержимому теневого корня следующий шаблон:

<template id="main">
    <h1><slot name="head"></slot></h1>
    <ul>
        <slot name="item"></slot>
    </ul>
    <i><slot name="foot"></slot></i>
</template>

Я хотел бы перераспределить каждый <span> с атрибутом slot="item" на вторичный шаблон, отвечающий за визуализацию отдельного элемента:

<template id="sub">
    <li><slot name="item"></slot></li>
</template>

Количество слотов с атрибутом name="item" не исправлено Он генерируется из базы данных и регулярно меняется.

Я понимаю, что слот можно перераспределить, подключив shadowRoot к родительскому элементу слота и установив атрибут слота слота, например <slot name="item" slot="newItem">, Но я не думаю, что это будет работать в моем случае, так как суб-шаблон должен обернуть каждый экземпляр элемента, а не список элементов.

Я мог бы прикрепить теневые корни и суб-шаблоны к каждому элементу в основном документе. Это будет работать, но я предпочитаю, чтобы основной шаблон импортировал и применял любые вложенные shadowRoots и шаблоны. Таким образом, первичный документ должен только импортировать файл, содержащий основной шаблон. Реализация деталей компонента инкапсулирована в основной HTML-файл шаблона.

Я также мог бы использовать slotchange событие и HTMLSlotElement.assignedNodes метод, чтобы собрать воедино решение сценариев. Но я бы предпочел не идти по этому пути.

Есть ли другой подход? Мой фактический вариант использования включает более сложную структуру HTML. Или, может быть, моя архитектура или понимание веб-компонентов неверно?

Answer 1

Самый простой подход, если это возможно, это добавить элементы с <li> тег в свете DOM.

<span slot=item><li>Item 1</li></span>
<span slot=item><li>Item 2</li></span>

Таким образом, вам не нужно использовать Javascript для генерации <li> теги.