Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Inheritance of CSS Variables #1470

Closed
blasten opened this issue Apr 30, 2015 · 3 comments
Closed

Inheritance of CSS Variables #1470

blasten opened this issue Apr 30, 2015 · 3 comments
Assignees
@sorvell

Comments

@blasten
Copy link
Contributor

blasten commented Apr 30, 2015

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.
@blasten blasten assigned blasten and sorvell and unassigned blasten Apr 30, 2015
@blasten blasten mentioned this issue Apr 30, 2015
Closed
@sorvell
Copy link
Contributor

sorvell commented May 5, 2015

This is by design. Polymer's custom property support is intended primarily to support cross scope styling, not inheritance from parent to child.

This is done for efficiency. We shim property values only at scope boundaries, not across the entire tree. To do so would require computing style inheritance through the entire dom tree, which we think is simply not practical.

Native custom properties will support these type of use cases.

@sorvell sorvell closed this as completed May 5, 2015
@arthurevans
Copy link

So is this doc incorrect (from the PRIMER):

These custom properties can be defined similar to other standard CSS properties
and will inherit from the point of definition down the composed DOM tree,
similar to the effect of color and font-family.

@sorvell
Copy link
Contributor

sorvell commented May 6, 2015

Fixed in PRIMER via 4ab986b

@sorvell sorvell reopened this May 6, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sorvell sorvell

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@sorvell @arthurevans @kevinpschaaf @blasten