Shadow DOM is a functionality that allows the web browser to render DOM elements without putting them into the main document DOM tree.
This creates a barrier between what the developer and the browser can reach; the developer cannot access the Shadow DOM in the same way they would with nested elements, while the browser can render and modify that code the same way it would with nested elements.
The impact of CSS scoped within the Shadow DOM of a particular element is that HTML elements can be encapsulated without the risk of CSS (Cascading Style Sheets) styles leaking and affecting elements that it was not supposed to affect.
Although these elements are encapsulated with regard to HTML and CSS, they can still fire events that can be picked up by other elements in the document -
glazkov.com 
The ability to scope HTML and CSS (Cascading Style Sheets) is essential to the creation of Custom Elements. If shadow DOM did not exist, different external Custom Elements could interact in unwanted ways.