Problem with scrims when multiple dialogs are opened

[vdegenne]

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 :

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

[bramkragten]

Still an issue with version 2.2.0

[vdegenne]

The issue is that the scrim element is outside the dialog element. Since the dialog is using popover feature can't we just move the scrim in the dialog and play with some css to make it look behind?

edit: i've updated the lit playground to match with version 2.2.0