The Shadow DOM is an isolated section of a webpage's structure that a web component maintains separately from the main document. CSS rules defined outside the Shadow DOM can't reach inside it, and CSS rules defined inside it can't affect the rest of the page. The isolation is enforced by the browser.
Web components use the Shadow DOM intentionally to create self-contained elements whose styling is fully encapsulated. A date picker, a video player, a custom dropdown built as a web component keeps its internal structure and styles private. No external stylesheet can accidentally break it, and no internal style can accidentally leak out.
For site owners, this becomes relevant when something inside a web component looks wrong and no CSS override they try seems to reach it. That's the encapsulation working as designed. The only path forward is modifying the component itself, which requires access to its source code. When Loupely Lens detects that you've clicked an element inside a Shadow DOM, it tells you immediately and doesn't charge a credit, because the CSS data behind that element isn't accessible through standard browser extension APIs.