Portals render children into a different DOM node.
Why portals:
- Escape parent overflow: hidden
- Avoid z-index stacking context issues
- Consistent positioning from document root
Implementation:
function Modal({ children }) {
return createPortal(
<div className="modal-wrapper">{children}</div>,
document.getElementById('modal-root')
);
}
Setup: Add a div with id="modal-root" at the end of body in your HTML.
Event bubbling: Events still bubble through React tree, not DOM tree.