How to hide a dialog via CSS

I have series of nested dialogs, and would like to hide the existing dialog when a new one is opened. Using the close/open methods is extremely slow I assume because it’s reconstructing the DOM. Really all I need to do is hide the overlay via CSS.

I’ve figured out how to assign the theme attribute on the dialog, which gets copied to the overlay, but that appears to only get copied when it opens, not dynamically. So how can I change the style/theme of a dialog overlay after it’s already opened.

One way (which isn’t necessarily the best approach) is to use a JavaScript call to hide the dialog

Dialog dialog = new Dialog();
Button hide = new Button("hide dialog",
        e -> dialog.getElement().executeJs(
                "this.$'display', 'none')"));