The Shadow DOM have three primary effects: DOM access, CSS isolation, and event propagation. LWC components are "first-class" DOM elements. Whenever you're outside the component, you see the component itself instead of its internals or nothing at all (null).
Events now only go up to a Shadow DOM boundary by default, except for "onevent" handlers. This means that events propagate faster by default. You can choose to control the behavior, though. Also,
event.target, which could sometimes be either null when outside the component, now returns the component itself as the target in these situations.
CSS outside the component can now only affect the top-level of the component. This is not the same as Aura, where you could affect internals with CSS. CSS cannot affect parent, child, or sibling CSS. It is completely isolated, which allows a component to appear as the developer intended regardless of what anyone else might do to that component. You can still style the component itself (e.g. put a border around it), and you do so by specifying the component's actual name. Taken from the documentation:
border: 2px solid red;
c-child with a block display mode and a solid border of red.
You can respond to class names, though, through the new
Whenever the "active" class is applied to your component, then it changes to light green. The component itself defines how classes can affect it, rather than having the parent force its styles on its children.
This should be of no surprise, but you can't use things like document.querySelector to find elements outside of your own Shadow DOM. This includes trying to finding elements in parent, sibling, or child components. There is a way to do composition, which is done through
<slot> elements. This is similar to Aura's
Aura.Component and Visualforce's
There's quite a bit more to this, so I suggest you read the Developer Documentation for more details (currently requires a Spring 19 org).