Problem with scrims when multiple dialogs are opened

Nobody has claimed this yet.

### What is affected?

Component

### Description

When opening multiple dialogs, scrim are not layered properly resulting in dialogs opening in top of each other with no clear way to discern boundaries.


### Reproduction

https://lit.dev/playground/#gist=d125eb4ef8a6086b907630c9eb28b6e2

### Workaround

Workaround proposed by @sorvell :

```js
import {MdDialog} from '@material/web/dialog/dialog.js';

MdDialog.addInitializer(async (instance: MdDialog) => {
await instance.updateComplete;
instance.dialog.prepend(instance.scrim);
instance.scrim.style.inset = 0;
instance.scrim.style.zIndex = -1;

const {getOpenAnimation, getCloseAnimation} = instance;
instance.getOpenAnimation = () => {
const animations = getOpenAnimation.call(this);
animations.container = [...animations.container, ...animations.dialog];
animations.dialog = [];
return animations;
};
instance.getCloseAnimation = () => {
const animations = getCloseAnimation.call(this);
animations.container = [...animations.container, ...animations.dialog];
animations.dialog = [];
return animations;
};
});
```

### Is this a regression?

Yes. This used to work, but now it doesn't.

### Affected versions

1.3.0

### Browser/OS/Node environment

Chrome/Firefox

Start with the Lit playground reproduction and the MdDialog entry point imported from @material/web/dialog/dialog.js. Reproduce multiple open dialogs in Chrome or Firefox, then inspect scrim placement and the open/close animation behavior. Done means stacked dialogs have clear boundaries without requiring the proposed workaround.

Written by the indexing model from the issue text.