[tomxor]

The utility of the shadow DOM is in controlled isolation for both CSS and JS, because nether can arbitrarily reach into a shadow DOM's tree via the parent DOM. Although they can be made to intentionally affect it through the root element in a useful but controlled way.

A virtual DOM is just an abstraction in JS; whereas the shadow DOM is a feature of the browser engine. They are not really comparable, a shadow DOM _is_ the DOM. The confusion may come from the fact that it can be used in custom elements where MVCs might be involved again.