diff --git a/src/components/ha-markdown-element.ts b/src/components/ha-markdown-element.ts
index 4658f5ee05..840fc97395 100644
--- a/src/components/ha-markdown-element.ts
+++ b/src/components/ha-markdown-element.ts
@@ -10,11 +10,8 @@ class HaMarkdownElement extends ReactiveElement {
 
   @property({ type: Boolean }) public breaks = false;
 
-  public connectedCallback() {
-    super.connectedCallback();
-    if (!this.shadowRoot) {
-      this.attachShadow({ mode: "open" });
-    }
+  protected createRenderRoot() {
+    return this;
   }
 
   protected update(changedProps) {
@@ -25,7 +22,7 @@ class HaMarkdownElement extends ReactiveElement {
   }
 
   private async _render() {
-    this.shadowRoot!.innerHTML = await renderMarkdown(
+    this.innerHTML = await renderMarkdown(
       this.content,
       {
         breaks: this.breaks,
@@ -39,8 +36,10 @@ class HaMarkdownElement extends ReactiveElement {
     this._resize();
 
     const walker = document.createTreeWalker(
-      this.shadowRoot!,
-      1 /* SHOW_ELEMENT */
+      this,
+      1 /* SHOW_ELEMENT */,
+      null,
+      false
     );
 
     while (walker.nextNode()) {