validate-html-nesting

validate-html-nesting detects HTML nesting that causes browsers to modify the DOM structure. For example, placing an <hr> inside a <p> causes the browser to split the paragraph.

If your HTML looks like this

<p>
  hello
  <hr/>
</p>

The browser will create DOM that looks like this

<p>hello</p>
<hr />
<p></p>

This mismatch between the DOM and the markup can cause issues in frameworks that assume the DOM matches the markup.

This library is designed to be used internally in frameworks that need to ensure rendered DOM matches authored markup, especially when the framework relies on compilation.

API

Specify the parent element as the first argument and the child element as the second argument on the isValidHTMLNesting function.

import { isValidHTMLNesting } from "validate-html-nesting";

isValidHTMLNesting("a", "a"); // false
isValidHTMLNesting("p", "hr"); // false
isValidHTMLNesting("div", "a"); // true