Impossible to customize the style of a dialog's ::backdrop residing inside a Shadow DOM.

[freshp86]

Note: Copied from whatwg/html#3601. Please continue discussion here.

More context at https://bugs.chromium.org/p/chromium/issues/detail?id=827397.

Minimal repro 1

This just showcases that any CSS variable is ignored from ::backdrop elements, even without Shadow DOM usage.
https://jsfiddle.net/1zevfdce/3/

Minimal repro 2

Showcases the problem when a <dialog> resides inside a Shadow DOM.
https://jsfiddle.net/o1trLoqL/2/

Note that the spec mentions the following

"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."

Is that the reason for the current behavior? If yes, should the spec be revised, such that customizing the style of a ::backdrop element is possible even if it resides inside a Shadow DOM? Or is there already a viable workaround?

cc @annevk @foolip @domenic @TakayoshiKochi

[guest271314]

Have you tried without CSS var() function?

[upsuper]

Is that the reason for the current behavior?

Yes. CSS variables are propagated via inheritance into descendants, so if a pseudo-element doesn't inherit from anything, CSS variables which are not defined for the pseudo-element directly would have no effect on the pseudo-element.

[guest271314]

dialog::backdrop {
  background-color: blue;
}

and

::backdrop {
  --bg-color: blue;
}

dialog::backdrop {
  background-color: var(--bg-color);
}

appear to render expected result at Chromium.

[freshp86]

@guest271314: True, that seems to work, but it still does not solve the issue of the 2nd minimal repro, which involves Shadow DOM.

[guest271314]

Have not tried Polymer. Can the code be composed without using a library?

[freshp86]

Here is a simple example that puts a <dialog> inside a Shadow root, without using Polymer. Note that I am not 100% sure that this is entirely equivalent, since it is adding a shadow root on a <div> element, instead of using a custom element.

[guest271314]

You can include <style> element within Shadow DOM to achieve the same result

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

dialog::backdrop {
  background-color: var(--bg-color);
}`;
let child = document.createElement('dialog');
child.textContent = 'foo';

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

let b = document.querySelector('button');
b.addEventListener('click', () => {
  child.showModal();
});

https://jsfiddle.net/062m2fhv/5/

[freshp86]

@guest271314: Thanks for your effort to help find a workaround.

Having said that, this bug is claiming that there is no proper (for example without using JS) way to style a <dialog>'s backdrop that lives within a custom element. Specifically see these docs (which are not using Polymer), on how the internals of a custom element should be able to be styled from the outside.

Your workaround shows that one can programatically create a dialog inside a Shadow DOM and, programmatically attach a style to it. It could be potentially useful, but still it seems that the current choice of the spec on how ::backdrop works, makes it impossible (I would gladly be proven wrong), to style such an element with HTML/CSS code only, such that one can stamp two instances of the custom element, and have instance A use a different backdrop than instance B.

[guest271314]

"without using JS" does not appear at OP? Not sure what you mean by "impossible", or how the linked document is related to the HTML standard? What exactly is the the requirement?

[guest271314]

such that one can stamp two instances of the custom element, and have instance A use a different backdrop than instance B

You can use the appropriate var() at CSS and select the specific <dialog> element https://jsfiddle.net/062m2fhv/7/.

[guest271314]

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();
  });
});

[guest271314]

Can you clarify the parameters of

with HTML/CSS code only

?

[annevk]

Really need @tabatkins and @fantasai's expertise to figure out what the right model for ::backdrop is I think.

And the other thing we need to know is that if we make it inherit, what would break...

[upsuper]

I wonder why was it made not inherit anything? If there isn't really any compelling reason, I guess we should probably just have it inherit from the element.