DOM
DOM stands for Document Object Model which is object based representation of any structured content such as HTML, XML etc. Browser maintains DOM object to render the HTML and any change in the DOM object cause re-rendering of the whole page.
Virtual DOM
Concept of Virtual DOM is adapted by popular UI libraries like React and Vue to solve mainly the performance issue.
Virtual DOM is an in-memory representation of the DOM. Any update in the DOM first applied to Virtual DOM instead of applying directly to actual DOM. Then it compare the changes against actual DOM through a process call "diffing" and apply the changes efficiently to actual DOM by only re-rendering the changed elements.
Shadow DOM
Concept of Shadow DOM is natively supported by browser (Not all browsers are currently supporting). Shadow DOM is mostly about encapsulation of the implementation. You can make reusable native web components which follows Shadow DOM concept. Implementation and styling of native web component is hidden within the Shadow DOM and having no impact from the outer DOM.
