How to select html dialog element

[kristianolsen]

inside the storybook element we have a web component that renders a native dialog element. This element is not found using the default chromeSelector. Is there any selector that would find this element?

[techeverri]

What do you mean by "native dialog"?
If you mean like what you see when you run alert("hello") in the console, then Loki won't be able to screenshot that. In web, Loki can screenshot stuff that can be rendered as DOM elements.

[kristianolsen]

I mean the html dialog element.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

It can create a dialog that is rendered above all other content. We have elements that wrap a dialog element, but I can not find a selector to use for the screenshot. It seems the dialog is rendered in "another" layer and the content of #storybook-root is therefore in effect an empty element?

[techeverri]

Make sure the element has the open attribute. Loki can't screenshot stuff that's hidden.

<dialog open></dialog>