Description
While using CSS variables, I noticed that the current implementation only reflects the CSS rules that are defined in the domHost of a custom element. However, any ancestor could define a selector that matches a given node. Let me provide some examples to illustrate the issue:
Case 1:
<x-tree>
<style>
:host {
--foo: 1;
}
</style>
--foo is 1 as expected
<x-leave>
<style>
:host {
--foo: 2;
}
--foo is 2 as expected
</style>
</x-leave>
</x-tree>Case 2:
<x-tree>
<style>
:host {
--foo: 1;
}
</style>
`--foo` is 1 as expected
<x-leave>
`--foo` is 1 as expected since it's inherited from the DOM host
</x-leave>
</x-tree>I have concluded after a further investigation that the problem isn't the order of
(1) this.mixin(props, this._computeStylePropertiesFromHost());
(2) this.mixin(props, this._computeOwnStyleProperties());as I suggested in #1459, but rather the the selector matching mechanism. For example, if we were using divs and css properties, we will get this result:
<style>
.tree {
color: red;
}
.substree {
color: blue;
}
.tree .subtree {
color: green;
}
</style>
<div class="tree">
<!-- color is red -->
<div class="subtree">
<!-- color is green since the selector `.tree .subtree` has higher precedence than `.subtree`-->
</div>
</div>This is what the implementation of custom variables doesn't handle yet because it assumes that the only way you can override properties is by defining them in their immediate host. I think the rules that contain CSS variables should be propagated down the tree in order to make it work.
So for example:
<head>
<style is="x-style">
x-tree {
--foo: 2;
}
x-tree x-leave {
--foo: 3;
}
</style>
</head>
<x-tree>
<style>
:host {
--foo: 1;
}
</style>
--foo should be 2, so that it will work in the same way as regular CSS properties.
<x-leave>
--foo should be 3, instead of 1.
</x-leave>
</x-tree>I hope it helps.