A web component is a reusable, self-contained HTML element created with a set of browser-native APIs. Web components encapsulate their own structure, style, and behavior. They're designed to work the same way on any website, in any framework, without outside interference.
The encapsulation is the defining feature. A web component manages its own DOM structure through a Shadow DOM, which means the CSS of the surrounding page can't accidentally break it and its internal CSS can't accidentally affect the rest of the page. This makes web components reliable building blocks for design systems and embedded widgets.
In practice, you're most likely to encounter web components in sites using modern JavaScript frameworks, and in third-party widgets (payment forms, chat widgets, media players). When something inside a web component looks wrong, external CSS overrides won't work: the component's isolation prevents them. The fix lives inside the component itself. When Loupely Lens detects a web component during a capture, it surfaces this clearly so you know to route to developer handoff rather than spending time on CSS rules that won't reach.