如何从一个 JSON 数据对象构建点亮元素的分槽层次结构

Question

我想从一个 JSON 数据对象构建一个点亮元素的层次结构 - 每个元素都位于其父元素的槽中。 例如图书馆、书籍、页面

在我的图书馆中，我想将书籍分配到一个插槽，但它们出现在图书馆的影子dom中。 页面分配正确。

有没有办法让书籍脱离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 编码的书籍被分配到库中的书籍插槽，但它不是动态呈现的

Answer 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);
  const slot = this.shadowRoot.querySelector('slot');

最后，你可以查询所有试卷元素，然后使用 HTMLSlotElement 接口的 allocate() 方法手动设置槽位

  const testBook = this.querySelectorAll('test-book');
  slot.assign(...testBook);  

示例