CSS containment used on high-complexity components

Without CSS containment, updating one component in a data table, carousel, or real-time dashboard causes the browser to recalculate layout and repaint for the entire document — not just the changed element (ISO-25010 resource-utilisation). On a dashboard with 12 widgets where one widget polls every second, that means 12 full-page layout passes per second. contain: layout paint tells the browser the component is visually isolated, scoping style and layout work to the component boundary and dramatically reducing render overhead for complex UIs.

Apply contain: layout paint to the root element of complex, frequently-updated components:

/* src/components/data-table/data-table.module.css */
.dataTable {
  contain: layout paint;  /* scope layout and paint to this element */
}

.dashboardWidget {
  contain: layout paint style;  /* also scope CSS inheritance */
}

In a React component:

// src/components/DataTable.tsx
<div style={{ contain: 'layout paint' }}>
  <table>{rows.map(renderRow)}</table>
</div>

Verify the impact in Chrome DevTools → Rendering → Paint flashing. After adding containment, the green flash on re-render should be limited to the component boundary rather than the full page. Do not apply containment to elements that overflow their box (dropdown menus, tooltips) — it clips overflow content.