How to Override CSS in a Shadow Dom/Web Component

One of the main purposes of Web Components is to provide encapsulation — being able keeping the markup structure and style hidden and separate from other code on the page so that different parts do not clash; this way the code can be kept nice and clean.

Shadow DOM gives us scoped style encapsulation and a means to let in as much (or as little) of the outside world as we choose.