HTMLElement inherits properties/methods from the Element interface. But, why on an instance of Element, it works even when I use the same properties and methods which are defined on HTMLElement. For example, in the given code, querySelector gives back Element which doesn’t have a style property defined on it (HTMLElement does). But, it works when I apply the style property on it. Also, instanceof HTMLElement gives back true. It should only be instanceof Event, Node, and Element that gives back true since Element inherits from all three. I know HTMLElement can inherit methods/properties from Element but is it also vice-versa? MDN Docs DOM Interfaces
var somefield = document.querySelector('#lname');
somefield.style.background = 'yellow'
somefield instanceof HTMLElement; //True
>Solution :
There are no elements on a page that are just Element instances. The interface serves as a parent "class" so HTMLElement, SVGElement and XULElement (and others) can inherit methods common to all elements.