Problem

In scenarios where applications have many Personas rendered the size of the DOM can become quite large. For example, rendering 235 Personas generates approximately 3,500 DOM nodes.

For example, this rendered element:

Generates this DOM:

Solution

We'd like to remove DOM nodes and only render things that are absolutely required. This can either be achieved by removing DOM nodes entirely or by conditionally rendering nodes.

On the topic of conditionally rendering nodes, the hidden Tooltip nodes from the screenshot seem like good candidates but they need to be rendered to work properly with iOS VoiceOver. See #22216 for details.

Risks (Rabbit holes)

Changing rendered DOM runs the risk of being a breaking change.