Как построить иерархию освещенных элементов из одного объекта данных JSON

я хочу построить иерархию освещенных элементов - каждый в слоте своего родительского элемента - из одного объекта данных 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, назначается ячейке книг в библиотеке, но не отображается динамически

Можете ли вы создать пример на освещенной игровой площадке:lit.dev/playground ?

Chellappan வ 03.04.2024 19:27
Javascript Замораживание, уплотнение и предотвращение расширения объекта
Javascript Замораживание, уплотнение и предотвращение расширения объекта
Чтобы установить свойство в объекте, которое нельзя изменить, удалить или установить, вы можете использовать defineProperty или defineProperties.
1
1
72
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы хотите назначить слот вручную на основе динамически генерируемых данных, вам необходимо включить эту опцию, установив для 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);  

Пример

Другие вопросы по теме