Comment créer LitElement sans DOM Shadow?

Question

Je crée des composants Web à l'aide de LitElement. Cela vient de https://lit-element.polymer-project.org/guide/start

// Import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';

// Extend the LitElement base class
class MyElement extends LitElement {

  /**
   * Implement `render` to define a template for your element.
   *
   * You must provide an implementation of `render` for any element
   * that uses LitElement as a base class.
   */
  render(){
    /**
     * `render` must return a lit-html `TemplateResult`.
     *
     * To create a `TemplateResult`, tag a JavaScript template literal
     * with the `html` helper function:
     */
    return html`
      <!-- template content -->
      <p>A paragraph</p>
    `;
  }
}
// Register the new element with the browser.
customElements.define('my-element', MyElement);

Comment créer LitElement sans DOM Shadow?

Je veux le créer sans # shadow-root ici:

Answer 1

Juste pour vous assurer que cette question est affichée comme une réponse:

createRenderRoot vous permet de remplacer l'opération qui crée une racine fantôme. Il est généralement utilisé pour rendre la lumière dom:

createRenderRoot() {
  return this;
}

Bien qu'il puisse être utilisé pour rendre entièrement ailleurs.

Je recommande vraiment d'utiliser le shadow DOM. La composition est difficile si un élément écrase son propre DOM léger.