Lodash isElement: SVG vs HTML Elements

The Lodash utility method _.isElement is designed to determine whether a given value is a DOM element. When comparing standard HTML elements to SVG elements, _.isElement exhibits identical behavior by returning true for both types. This consistency exists because Lodash relies on DOM node interface properties—specifically nodeType === 1—rather than strict JavaScript prototype chains that differentiate HTML from SVG elements.

How _.isElement Evaluates Values

To understand why SVG and HTML elements behave identically in Lodash, it helps to examine how the method determines element identity. Internally, _.isElement performs a duck-typing check:

1. It verifies that the value is an object-like structure (not null and of type object).
2. It verifies that value.nodeType === 1 (the standard identifier for Node.ELEMENT_NODE).
3. It ensures that the object is not a plain JavaScript object literal.

Because this evaluation does not require an instanceof HTMLElement validation, any node representing an element in the DOM tree passes the check.

Standard HTML Elements vs. SVG Elements

In modern browser environments, HTML elements and SVG elements belong to different parts of the DOM specification hierarchy:

• HTML Elements: Instances such as <div>, <p>, or <span> inherit from HTMLElement, which inherits from Element, and ultimately from Node. Their nodeType is always 1.
• SVG Elements: Instances such as <svg>, <circle>, or <path> inherit from SVGElement, which inherits directly from Element (bypassing HTMLElement), and ultimately from Node. Their nodeType is also always 1.

When passed to _.isElement:

const htmlDiv = document.createElement('div');
const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');

_.isElement(htmlDiv); // true
_.isElement(svgPath); // true

Both return true as expected.

Common Pitfall: Vanilla JavaScript vs. Lodash

Developers often anticipate a difference in behavior because native JavaScript type checks can fail when treating SVG elements as standard elements:

// Native prototype check fails for SVG
htmlDiv instanceof HTMLElement; // true
svgPath instanceof HTMLElement; // false

// Native generic element check succeeds for both
htmlDiv instanceof Element;     // true
svgPath instanceof Element;     // true

If custom application code relies on instanceof HTMLElement, SVG elements will be rejected because they belong to the XML/SVG namespace rather than the HTML namespace. Lodash’s _.isElement avoids this cross-namespace issue entirely by verifying the nodeType attribute rather than the HTMLElement constructor.

As a result, you can reliably use _.isElement to validate visual DOM nodes across both HTML and SVG contexts without writing separate logic for vector graphic elements.