Supporting ie11 and inheritance of css variable with slotted components

[reactuser35]

I am trying to use css variables with ie 11 and I got stucked at one point.

Think that I have a layout element and icon element.My layout element only have slot and in that slot there are icon components. Dom tree be like here.

<my-layout>
  <my-icon type="large"></my-icon>
  <my-icon type="medium"></my-icon>
  <my-icon type="small"></my-icon>
</my-layout>

And my-icon component have these in its style:

:host {
  fill: var(--icon-default-fill-color, green);
 }

• On Chrome when I run these code with my-layout component:

$0.style.setProperty('--icon-default-fill-color', 'yellow');

It sets the variable on my-laoyut component and all the icons below changes their color with yellow.It is OK.

• On ie11 when I run these code with my-layout component:

ShadyCSS.styleSubtree(this, {
        '--icon-default-fill-color': 'yellow' 
});

It sets the variable on my-laoyut component successfuly.When I check it with below code it seems ok and returns 'yellow' as expected.

ShadyCSS.getComputedStyleValue($0, '--icon-default-fill-color')

But below(slotted) icon components color doesn't change.

[bicknellr]

@dfreedm, do you know if this is expected to work in Shady CSS? I know it has limitations around <slot> for @apply, but I'm not sure if that applies to plain CSS custom properties also.

[reactuser35]

@dfreedm, do you know if this is expected to work in Shady CSS? I know it has limitations around <slot> for @apply, but I'm not sure if that applies to plain CSS custom properties also.

Actually I really don't know if this is a bug or expected behaviour as it has limitations with polyfill.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed after being marked stale. If you're still facing this problem with the above solution, please comment and we'll reopen!