Impossible to customize the style of a dialog's ::backdrop residing inside a Shadow DOM.

[freshp86]

More context at https://bugs.chromium.org/p/chromium/issues/detail?id=827397.

Minimal repro 1

This just showcases that any CSS variable is ignored from ::backdrop elements, even without Shadow DOM usage.
https://jsfiddle.net/1zevfdce/3/

Minimal repro 2

Showcases the problem when a <dialog> resides inside a Shadow DOM.
https://jsfiddle.net/o1trLoqL/2/

Note that the spec mentions the following

"It does not inherit from any element and is not inherited from. No restrictions are made on what properties apply to this pseudo-element either."

Is that the reason for the current behavior? If yes, should the spec be revised, such that customizing the style of a ::backdrop element is possible even if it resides inside a Shadow DOM? Or is there already a viable workaround?

[emilio]

Probably this issue should be moved to https://github.com/whatwg/fullscreen?

[emilio]

But yeah, I suspect there's a reasoning for that ::backdrop behavior, but unfortunately the commit introducing it (whatwg/fullscreen@aa8c3ce) doesn't say anything.

cc @annevk

[freshp86]

cc @domenic @TakayoshiKochi

[annevk]

I wrote this to address https://lists.w3.org/Archives/Public/www-style/2012Jun/0441.html by @fantansai. At the time CSS variables weren't much of a thing yet.

Is this the only pseudo-element that does not inherit?

I also wonder how safe it would be to change this.

[annevk]

And yeah, I guess this should be moved to Fullscreen.

cc @foolip

[freshp86]

Moved the issue over to whatwg/fullscreen#124. Feel free to close this one and continue discussion there.