[Feature Request] Allow usage of CSS variables with global overlays

[MathieuPuech]

Describe the bug

If you want to define a CSS variable on a dialog, the dialog content slot will not have these variables set.

To Reproduce

Added fork reproduction
https://github.com/MathieuPuech/lion/tree/bug/css-variables-global-overlays

Steps to reproduce the behavior:

1. Go to storybook demo on fork
2. Click on Dialog > Styling Content

Expected behavior

CSS variable --background-color is set on the dialog but not usable in the styled content dialog

Additional context

https://polymer.slack.com/archives/CJGFWJN9J/p1591109345221700

[tlouisse]

This would be hard to find a nice fix for. I don't know if there's a proper api for getting all css variables that are used in a certain dom tree (the content node being that tree).

If you know what css variables to look for, you could theoretically read their values on the 'original' dom connection point and temporarily reapply them in the wrapper inside the connection point in the body:
https://davidwalsh.name/css-variables-javascript

If you not know what to look for, it would probably mean you would have to traverse all styles in the content node (parse them and look for occurrrences of var(--my-var).

Another approach

Another approach would be to keep the contentNode at the original place in the dom and just apply a position:fixed.
This approach has two drawbacks:

1. The positioning can break, depending on the css applied to the parent dom. overflow and transform of the parents can break your dialog
2. When we have a modal dialog, all suroundings must get aria-hidden=true. On body level this is simple to achieve. In 'the middle of a page' this is harder, especially with shadowRoots.
   An alternative might be to only use aria-modal=true here, but this might not work for older screenreaders/browsers.

Let me know what you think

[MathieuPuech]

I can indeed get variables and reapply them in my case because I know what are the variables to apply.

Traverse all styles of the content node is possible but variables can be set in parent of the content node, they are only in computedStyle that can't be traversed.

The other approach is the solution used by <mwc-dialog> with mdc. I think they found solutions for the 2 drawbacks but I don't know if it is good.

[tlouisse]

I can indeed get variables and reapply them in my case because I know what are the variables to apply.

Nice. Not the best developer experience if you have to do this manually, though, so maybe we can try to come up with something more automated 🙂

Traverse all styles of the content node is possible but variables can be set in parent of the content node, they are only in computedStyle that can't be traversed.

Not sure if I understand you correctly, but we can do the follwoing(?):

const cssVarNames = findCssVarNamesInDomTree(contentNode); // ['--my-var1', '--my-var2', ...] 
const cssVarMap = cssVarNames.map(name => {
  const value =  getComputedStyle(contentNode).getPropertyValue(name);
  return { name, value };
});

The other approach is the solution used by <mwc-dialog> with mdc. I think they found solutions for the 2 drawbacks but I don't know if it is good.

Yeah, that would be interesting to look at 👍
What I at least know from the Polymer dialog (paper-dialog) is that it suffered from both drawbacks.

[tlouisse]

Update: the mwc-dialog breaks when the parent has:

transform: scale(1);

and/or

overflow: hidden;

See: https://sordid-shell-deerstalker.glitch.me/

[MathieuPuech]

Traverse all styles of the content node is possible but variables can be set in parent of the content node, they are only in computedStyle that can't be traversed.

Not sure if I understand you correctly, but we can do the follwoing(?):

const cssVarNames = findCssVarNamesInDomTree(contentNode); // ['--my-var1', '--my-var2', ...] 
const cssVarMap = cssVarNames.map(name => {
  const value =  getComputedStyle(contentNode).getPropertyValue(name);
  return { name, value };
});

Yes, you can do this when you know the variables names, I don't think you can find the css variables names in dom tree (findCssVarNamesInDomTree)

[MathieuPuech]

I was wrong, it seems it's possible to get variables with getComputedStyle or computedStyleMap (depending on the browser).

I found that getComputedStyle is working to find variables on safari and firefox but not on chrome. Chrome can find the variables with computedStyleMap.

https://codepen.io/mathieupuech/pen/gOPpmMO