Re: [whatwg/fullscreen] Impossible to customize the style of a dialog's ::backdrop residing inside a Shadow DOM. (#124)

I'm working on a `<dialog>` element-based web component. One requirement is to allow the user to customize dialog background (backdrop area). I keep running into different obstacles with different approaches.

- `::backdrop` + CSS variable: not working with shadow DOM (tried putting custom css variables under `:root` or `:host` or `::backdrop`, none of them work.
- Export `<dialog>` via CSS shadow parts: `part(dialog)` works but `part(dialog)::backdrop` doesn't have any effects
- Roll my own background layer with a `<div>`: when multiple dialogs are open, the backing `<div>` of the topmost dialog couldn't cover the dialogs underneath it as `<dialog>` elements are in [top layer](https://fullscreen.spec.whatwg.org/#new-stacking-layer).

I ended up with a traditional approach without `<dialog>`.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/fullscreen/issues/124#issuecomment-1221361617
You are receiving this because you are subscribed to this thread.

Message ID: <whatwg/fullscreen/issues/124/1221361617@github.com>

Received on Saturday, 20 August 2022 16:29:26 UTC