Render a template without shadow DOM in LitElement

February 27, 2021

In order to render a template without shadow DOM, you have to implement createRenderRoot and return this. This will enable you to access external styles.



import {
} from "https://unpkg.com/lit-element/lit-element.js?module";

export class MyElement extends LitElement {
  static get styles() {
    return css`
      h1 {
        background-color: red; /* will not work */
  createRenderRoot() {
    return this; // will render the template without shadow DOM
  render() {
    return html` <h1>Hello World</h1> `;

customElements.define("my-element", MyElement);


body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: sans-serif;
  background-image: url("https://assets.codepen.io/3436988/background.png");

h1 {
  position: relative;
  text-transform: uppercase;
  color: #fff;
  font-size: 3rem;

h1::after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

I made a small demo, you can check the code on CodePen.

Your JS is turned off. Please turn it on to see the CodePen. Here's a screenshot from the Pen

Try reload the page, our check out the pen on CodePen.