Replay SDK: Allowlist of elements to not mask

[bruno-garcia]

1. “Allowlist” nodes/class/selector

   1. Quote 1: For masking text / media, could we get a class that acts as the inverse of the maskTextClass(as seen under [privacy configuration here](https://github.com/getsentry/sentry-replay#privacy-configuration))? Since we’ve decided to mask all text and media in the app, it would be nice to be able to mark some components where we know there will be no PII so it can be shown.

   2. Quote 2*: I really like the way the new Replay feature works, but I wish I could configure the masking the other way around: Instead of telling Sentry what elements need to be masked, I would like to mark elements that can be visible. A simple custom directive eg. "show-in-sentry-replay" would be perfect and could reduce the amount of work I need to do meet our needs*

[ryan953]

I'm tried and failed with something like :not(html, *>*, *:where(* > .nav li a), .nav li to allow the navbar text to be visible, but to mask everything else.

It's difficult ,because you want to * container nodes, like div but then not-mask inner content. So we want the selector to be like * > :not(nav) and skip all parent and child nodes of my target.

To test you can select a note in the inspector and exec $0.matches(...) and $0.closest(...)

See also: #6354

[Lms24]

This PR partially addresses this issue

We can also update docs to tell users what using not would essentially give them an allowlist of elements that shouldn't be masked.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀