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);

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

Did you try specifying a `renderRoot`? https://lit-element.polymer-project.org/api/classes/_lit_element_.litelement.html#createrenderroot — Caramiriel, Mar 12 '19 at 17:04

Justin Fagnani · Accepted Answer · 2021-05-07T15:46:21.643

55

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.

edited May 07 '21 at 15:46

answered Mar 17 '19 at 23:40

Justin Fagnani

10,483
2
27
37

18

How else do you suggest using Bootstrap or other website wide stylesheet? – ryanafrish7 Aug 17 '20 at 18:51
2

Ideally your stylesheets are broken down so that you can import only the parts each component needs. I would wrap those parts in JS modules so that they can be automatically loaded with the components, bundled, etc., then inject them into the shadow roots. – Justin Fagnani Aug 22 '20 at 17:56
it appears that shadow roots break focus-visible behavior.. fun – NullVoxPopuli Apr 25 '21 at 01:29
1

Note override `createRenderRoot` will make shadow DOM features like encapsulated CSS and slots unavailable. Then what's the meaning to use the web component? – Tina Chen Jul 24 '21 at 06:32
3

@TinaChen web component allows you to, well, componentize your code, which is almost always an improvement if you are not already using React/Vue/Angular etc. You still get encapsulation. Also, if you already have a huge code base with a lot of CSS rules, it can be hard to convert the styling to use lit CSS. And there are many other minor issues that make adopting shadow DOM complicated. We are not living in an ideal world. – Zhe Jul 30 '21 at 13:28
If it doesn't have a shadow DOM, it's a custom element, not a web component. – The Fool Sep 18 '21 at 10:51
1

Are slots only specific to shadow-dom? Can't the light dom use slots too? – David Mays Jul 23 '22 at 12:51
s are a shadow DOM feature. For a slot concept to work you need a separation between projected content and the spot to project into. That doesn't work with only one context like like DOM w/o shadow DOM. – Justin Fagnani Oct 12 '22 at 15:55
@ryanafrish7 you could use bootstrap shadow dom just by linking the bootstrap in your component, the same you do in the normal dom. This will not overload the page, because same link will be cached. – pikilon Dec 19 '22 at 11:43
@TheFool It's always a custom element regardless. Personally I don't use the term "web component" because, well, even a React component is a "web component", which is confusing. Elements (builtin or custom)! – trusktr May 23 '23 at 23:15
@trusktr, yes but not the other way around. Web Components is a superset of custom elements. So every web component is a custom element but not every custom element is a web component. – The Fool May 24 '23 at 04:31

How to create LitElement without Shadow DOM?

1 Answers1