如何将包含插槽的 LIT Web 组件渲染到文档正文中？

Question

如何在使用

createRenderRoot

在

document.body

中渲染组件并使用插槽时保持 Shadow DOM 行为？

在我当前的实现中，我使用

createRenderRoot

来设置我的组件应该渲染的位置，特别是在

document.body

中。但是，当我使用插槽时，组件不再按预期运行，可能是因为它不再使用 Shadow DOM。

有没有办法在使用

createRenderRoot

时保持Shadow DOM行为？

这里有一个 playground 来演示这个问题。 灯光游乐场

Answer 1

试试这个

在这里查看

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('light-dom')
export class LightDom extends LitElement {
  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true, open: true};
  constructor() {
      super()
          
    // Create a shadow root
    const shadow = this.attachShadow({ mode: "open" });

    // Create div and add slots
    const div = document.createElement("div");
    div.innerHTML = `
      <div> Custom rendering <slot></slot> with a SLOT inside.</div>
    `

     // Append it to the shadow root
     shadow.appendChild(div);
    }
  protected createRenderRoot() {     
    return document.body
  }
}