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

HTML

```
<button>Open blue dialog inside Shadow DOM</button>
<button>Open green dialog inside Shadow DOM</button>
<div id="parent"></div>
```

JavaScript

```
let d = document.querySelector('#parent');
let shadowRoot = d.attachShadow({
  mode: 'open'
});
let style = document.createElement("style");
style.textContent = `::backdrop {
  --bg-color: blue;
  --second-bg-color: green;
}

dialog:nth-of-type(1)::backdrop {
  background-color: var(--bg-color);
}
dialog:nth-of-type(2)::backdrop {
  background-color: var(--second-bg-color);
}
`;
let child = document.createElement('dialog');
child.textContent = 'foo';
let child1 = document.createElement('dialog');
child1.textContent = 'bar';

shadowRoot.appendChild(style);
shadowRoot.appendChild(child);
shadowRoot.appendChild(child1);

var dialogs = shadowRoot.querySelectorAll("dialog");

let b = document.querySelectorAll('button');
b.forEach((button, index) => {
  button.addEventListener('click', () => {
    dialogs[index].showModal();
  });
});
```


-- 
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-378111560