Why browser extension UIs break on many sites and how a Shadow DOM wrapper fixes it

Badges injected by browser extension content scripts often render incorrectly on real websites, appearing oversized, misplaced, or missing controls. The problem stems from aggressive global CSS resets, utility classes, and broad element selectors on supermarket web shops that leak into extension widgets. The author, while building the open-source ShrinkWatch EU extension, found a fix by placing the widget inside a Shadow DOM with a reset host element and self-contained styles. The approach also recommends fixed pixel units instead of rem, and attaching the host to the document root so page navigation or body transforms do not disrupt its positioning. The author reports that since version 0.3.2 the badge has looked consistent across the shops tested in a real browser.