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 its own light DOM.