Shadow DOM is used for UI

CWE-653 (Insufficient Compartmentalization) applies when injected UI elements live directly in the host page's DOM tree. Without Shadow DOM, the host page's CSS rules cascade into your extension UI — z-index, font-size, color, display can all be overridden by the page, producing broken layouts. Conversely, your injected styles can break the host page's UI, causing support tickets and potential Chrome Web Store policy violations. Shadow DOM creates a hard boundary at the style sheet level: the host page cannot style inside the shadow root, and styles defined inside cannot leak out. This is the only reliable way to build UI in content scripts that survives across arbitrary host pages.

Wrap every injected UI element in a Shadow DOM root with mode: 'closed' in your content scripts.

// src/content.js
const host = document.createElement('div');
const shadow = host.attachShadow({ mode: 'closed' });
shadow.appendChild(myUIElement);
document.body.appendChild(host);

Using 'closed' prevents the host page from accessing the shadow root via element.shadowRoot. Load all stylesheets into the shadow root directly using new CSSStyleSheet() or a <link> element appended inside the shadow.