JavaScript Element getHTML() Method

What You’ll Learn

Element.getHTML() is an instance method that serializes an element’s DOM to an HTML string. Learn basic serialization, how it compares to innerHTML, shadow DOM options (serializableShadowRoots and shadowRoots), and five try-it labs aligned with MDN.

Introduction

When you need to export or copy the HTML inside an element, you might reach for innerHTML. getHTML() is the modern method that does the same job — and adds optional control over shadow DOM serialization.

Without any arguments, MDN states that getHTML() behaves like reading innerHTML: child nodes that are shadow roots are not serialized. Pass an options object when you need shadow content in the output string.

This page is part of JavaScript Element. Pair getHTML() with attachShadow() when building web components.

Understanding the getHTML() Method

Calling el.getHTML(options) walks the element’s descendants and returns their HTML serialization as a string.

• It is an instance method on Element.
• options (optional) — controls shadow root serialization (MDN).
• serializableShadowRoots — include shadow roots marked serializable: true (default false).
• shadowRoots — array of specific ShadowRoot objects to include (default []).
• Returns a string of HTML markup.
• No arguments → same result as el.innerHTML (MDN).
• Throws no exceptions according to MDN.

📝 Syntax

General form of Element.getHTML (MDN):

getHTML(options)

Parameters

options (optional) — an object with:

• serializableShadowRoots — boolean; include serializable shadow roots (default false, MDN).
• shadowRoots — array of ShadowRoot objects to serialize regardless of mode (default [], MDN).

Return value

A string representing the HTML serialization of the element’s descendants (MDN).

Common patterns

// Basic — same as innerHTML
const html = card.getHTML();

// Include serializable shadow roots
const withShadow = host.getHTML({ serializableShadowRoots: true });

// Include specific shadow roots (open or closed)
const explicit = host.getHTML({ shadowRoots: [shadow] });

console.log(html);
console.log(withShadow.length);

Examples Gallery

Examples follow MDN Element.getHTML() patterns. Use View Output or Try It Yourself for each case.

const card = document.getElementById("card");
const html = card.getHTML();

console.log(html);
// "<h2>Title</h2><p>Body text</p>"

<h2>Title</h2><p>Body text</p>

const box = document.getElementById("box");

const byMethod = box.getHTML();
const byProperty = box.innerHTML;

console.log(byMethod === byProperty); // true (no shadow DOM)

true

const host = document.querySelector("info-box");

const plain = host.getHTML();
const withShadow = host.getHTML({ serializableShadowRoots: true });

console.log(plain.includes("Shadow message"));      // false
console.log(withShadow.includes("Shadow message")); // true

false
true

const host = document.getElementById("host");
const shadow = host.attachShadow({ mode: "closed" });
shadow.innerHTML = "Hidden shadow";

const html = host.getHTML({ shadowRoots: [shadow] });

console.log(html.includes("Hidden shadow"));

true

const template = document.getElementById("email-template");
const snippet = template.getHTML();

// Save or log the markup
localStorage.setItem("draft-html", snippet);
console.log(snippet.length);

74
(HTML string length)

🚀 Common Use Cases

• Exporting a component’s inner HTML for copy/paste or debugging.
• Serializing web components that use shadow DOM (with options).
• Saving draft markup to localStorage or sending to a server.
• Building HTML diff tools that need a string snapshot.
• Testing that rendered DOM matches expected markup.
• Migrating from innerHTML reads to the modern serialization API.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline 2024, September 2024).
• Without options, behaves like innerHTML — shadow roots excluded (MDN).
• serializableShadowRoots: true includes shadows marked serializable at attach time.
• shadowRoots array can include open or closed roots you pass explicitly (MDN).
• Some browsers escape </> in attribute values during serialization (MDN).
• Related: innerHTML, attachShadow(), shadowRoot, JavaScript hub.

💡 Best Practices