How to create LitElement without Shadow DOM?

Question

I am creating a web components using LitElement. This is from 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);

How to create LitElement without Shadow DOM?

I want to create it without #shadow-root here:

Answer 1

Just to make sure this question is shown as answered:

createRenderRoot allows you to override the operation that creates a shadow root. It's usually used to render to light dom:

createRenderRoot() {
  return this;
}

Though it could be used to render somewhere else entirely.

I really recommend using shadow DOM. Composition is difficult if an element overwrites it's own light DOM.