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

Polymer/Chromium use a [color palette implemented](https://cs.chromium.org/chromium/src/third_party/polymer/v1_0/components-chromium/paper-styles/color.html?q=paper-styles/color&dr&l=19) [via global `<style>` with contents like](https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/shared_vars_css.html?l=9):

```css
:root {
  --google-grey-400: #bdc1c6;
}
```

Even if we changed `:root {` to `:root, dialog::backdrop {` at the global level, shadow roots intentionally isolate styles (but allow custom properties to "pierce").

Chromium created a custom element (`<cr-dialog>`) w/common styles and logic.  It [uses a `dialog` inside a shadow root](https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html?sq=package:chromium&dr=C&g=0&l=60):

```css
/* Inside a shadow root. */
dialog::background {
  background-color: var(--google-grey-400);  /* <-- doesn't work. */
}
```

Which is why we're having problems.

We might be able to paste parts of the global `<style>` inside **each and every** shadow root (after adding `::backdrop` to the selectors), but that may degrade performance.

If `dialog` API exposes `::backdrop` solely via pseudo, it seems that it's essentially *specified* to work counter-intuitively with variables.

We're pretty seriously thinking of replacing `::backdrop` with a wrapper `<div class="backdrop">` because of this issue (which would be a shame, IMO).

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