[backdrops] Mask cutout for trigger

# Feature request

## Summary

If you want an anchored popup to have a dimming backdrop without also dimming its trigger, there needs to be a mask around the trigger that also respects its border-radius. `z-index` styles don't work given the `isolation: isolate` container.

Here's one way to achieve this:

```html

trigger

```

```css
.box {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
}

.inverted {
mask: url(#mask) no-repeat,
linear-gradient(#000);
mask-composite: exclude;
}
```

```js
const triggerRect = trigger.getBoundingClientRect();

const radius =
parseFloat(getComputedStyle(trigger).borderRadius);

rect.setAttribute('x', triggerRect.left);
rect.setAttribute('y', triggerRect.top);
rect.setAttribute('width', triggerRect.width);
rect.setAttribute('height', triggerRect.height);
rect.setAttribute('rx', radius);
rect.setAttribute('ry', radius);
```

## Examples in other libraries

The mask is also used in tour components where the popup navigates around the UI