я хочу построить иерархию освещенных элементов - каждый в слоте своего родительского элемента - из одного объекта данных JSON. например библиотека, книги, страницы
В моей библиотеке я хочу, чтобы книги были назначены ячейкам, но они появляются в теневой области библиотеки. страницы назначены правильно.
есть ли способ вывести книги из ShadowDOM, например, так:
library.appendChild(book);
library.shadowRoot.querySelector("slot[name='books']").assign(book);
заранее спасибо
return html`
<div id = "library">
<slot name = "books"></slot>
</div>
${this.items.books.map((book) => html`
<book slot = "books">
<div slot = "pages">
${book["pages"].map((page) => html`
<page slot = "pages">${page}</page>`
)}
</book>`
)}`;
вот мой пример: освещенная детская площадка
страницы закреплены за слотом страниц в книгах <slot name = "pages">
книги не назначены в слот для книг в библиотеке
книга, закодированная вручную в HTML, назначается ячейке книг в библиотеке, но не отображается динамически
Если вы хотите назначить слот вручную на основе динамически генерируемых данных, вам необходимо включить эту опцию, установив для ShadowRootOption значение от slotAssignment
до manual
.
static shadowRootOptions = {...LitElement.shadowRootOptions, slotAssignment:'manual'};
Затем вы можете визуализировать динамически сгенерированный компонент test-book
в Light DOM основного элемента, как показано ниже.
const element = this.items.library.map(
(book) => html`<test-book slot = "books">
<div slot = "pages">${book.book.map(
(page) => html` <test-page slot = "pages">${page.page}</test-page> `
)}</test-book>`);
render(element, this);
Наконец, вы можете запросить все элементы test-book
, а затем использовать метод assign()
интерфейса HTMLSlotElement
, чтобы вручную установить слот.
const slot = this.shadowRoot.querySelector("slot");
const testBook = this.querySelectorAll('test-book');
slot.assign(...testBook);
Пример
Можете ли вы создать пример на освещенной игровой площадке:lit.dev/playground ?