HTML dialog ::backdrop ignores all CSS variables. |
||
Issue descriptionMinimal example at https://jsfiddle.net/1zevfdce/3/. Trying to style a dialog's ::backdrop pseudoelement with a CSS variables, and it seems that the variables in never in the scope of ::backdrop, even if it is defined on the top-level html element. This makes it impossible to style the ::backdrop of a <dialog> that lives inside a custom element's Shadow DOM, from the outside. I am hitting this as part of addressing issue 818279 (changing cr-dialog from a dialog subclass to a wrapper), see CL at [1]. Which affects print preview's usage of cr-dialog at [2] [1] https://chromium-review.googlesource.com/c/chromium/src/+/976394 [2] https://cs.chromium.org/chromium/src/chrome/browser/resources/print_preview/new/search_dialog_css.html?l=11
,
Mar 29 2018
This is per spec AFAICT. From https://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element : > 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. Which means that the variables aren't inherited from the dialog (nor any other element).
,
Mar 29 2018
Does that sentence refer to CSS styling, or to whether the pseudoelement inherits from HTMLElement? Even if this is spec compliant, it seems that it is impossible to style a <dialog>'s backdrop that is inside a Shadow DOM. If I had to guess, that spec did not take into account Shadow DOM when originally authored. Either way, is there a work-around? I am not sure if ::backdrop can be styled from JS either (using "foo.style.backgroundColor =". See [1] for a concrete case where a dialog is inside a Shadow DOM and needs to have different backdrop color in various cases. [1] https://chromium-review.googlesource.com/c/chromium/src/+/976394/17/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
,
Mar 30 2018
> Does that sentence refer to CSS styling, or to whether the pseudoelement inherits from HTMLElement?
It's about CSS inheritance, which is what makes that CSS variables defined on the root are available for the rest of the elements.
> Even if this is spec compliant, it seems that it is impossible to style a <dialog>'s backdrop that is inside a Shadow DOM. If I had to guess, that spec did not take into account Shadow DOM when originally authored.
If dialog::backdrop can't be styled from Shadow DOM (as in, a <style>::backdrop { background: black !important }</style> doesn't get applied) I'd consider that a bug.
But that's different from the title from this issue, the fact that variables "don't work" is per spec, though I don't really know the reasoning behind it, feels quite odd.
> Either way, is there a work-around? I am not sure if ::backdrop can be styled from JS either (using "foo.style.backgroundColor =".
It can't afaict :/
,
Mar 30 2018
My original minimal repro is not using Shadow DOM, because I thought it was enough to showcase the problem. See https://jsfiddle.net/o1trLoqL/ for a slightly more complex example using a dialog inside a Shadow DOM. > If dialog::backdrop can't be styled from Shadow DOM ... I'd consider that a bug Styling from within the Shadow DOM works (that would be a different bug though). As shown in my latest example, the problem is when a style is passed from *outside* of the Shadow DOM, and needs to be applied to the ::backdrop residing inside the Shadow DOM. This works with any other element, but not ::backdrop. > It can't afaict :/ Who would be the right person to reach out to for further progress on this (spec author?).
,
Mar 30 2018
FYI, I filed https://github.com/whatwg/html/issues/3601.
,
Mar 30 2018
,
Sep 25
The issue was moved to https://github.com/whatwg/fullscreen/issues/124 |
||
►
Sign in to add a comment |
||
Comment 1 by dpa...@chromium.org
, Mar 29 2018