In which cases will element.parentElement or element.parentNode be null in a HTML DOM?

Question

I have created custom element using LitHTML and my own bloc based library for state management. Now I have stumble upon a case where in a element though pretty inside some other elements, returns null for parentNode and parentElement. I can't figure out why?

What are cases in which parentNode and parentElement be null ?

Answer 1

The element c returned by your query has no parentElement, but it does have a parentNode which is a shadowRoot.

ShadowRoots don't have a parentNode property (which is why your c.parentNode.parentNode call returns null) but you can return the element that the shadowRoot is attached by accessing the shadowRoots host property (c.parentNode.host).

See the docs: ShadowRoot

Or related question: Get shadow root host element