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

> @mfreed7 do you have any thoughts about how we could resolve this? What approach would a normal web component use to allow this customization, and can we copy that approach in the UA stylesheet?

So this relates to this issue: https://github.com/w3c/csswg-drafts/issues/6641. I think it would be good for you to chime in on that issue, bringing back up the `::backdrop` issue.

It sounds (?) like the current guidance from that issue is to use `@property`, which does work for this use case:

```html
<div>
  <template shadowroot=open>
    <dialog>I'm in the top layer, inside shadow DOM</div>
    <style>
      ::backdrop {
        background-color:var(--foo,red);
      }
    </style>
  </template>
</div>
<style>
  @property --foo {
    syntax: '<color>';
    inherits: false;
    initial-value: blue;
  }
</style>
<script>
  document.querySelector('div').shadowRoot.firstElementChild.showModal();
</script>
```

In Chrome, that shows up with a blue `::backdrop`.

...but they acknowledge that this is a clumsy solution with several shortcomings. I thought I'd post it in case it's a way forward for you.

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

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