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

A workaround which gets the style properties of  host element from `document.styleSheets` which begin with `--`, and replaces any matching existing properties and values within `<style>` element of Shadow DOM of host element with the value defined at the style sheet

```
let d = document.querySelector('#parent');
let shadowRoot = d.attachShadow({
  mode: 'open'
});
let style = document.createElement("style");
let child = document.createElement('dialog');
let props = [];
for (let sheet of document.styleSheets) {
  for (let cssRules of sheet.cssRules) {
    if (document.querySelector(cssRules.selectorText) === d) {
      for (let rule of cssRules.style) {
        if (/--/.test(rule)) {
          props.push([rule, cssRules.style.getPropertyValue(rule)]);
        }
      }
    }
  }
}
style.textContent = `dialog::backdrop{background-color:var(--bg-color)}`;
shadowRoot.prepend(style);

if (props.length) {
  for (let [key, prop] of props)
    style.textContent = style.textContent.replace(`var(${key})`, prop)
}

child.textContent = 'foo';
shadowRoot.appendChild(child);

let b = document.querySelector('button');
b.addEventListener('click', () => {
  child.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-378700399