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

css variables break specificity #2042

Closed
TylerPachal opened this issue Jul 8, 2015 · 2 comments
Closed

css variables break specificity #2042

TylerPachal opened this issue Jul 8, 2015 · 2 comments

Comments

@TylerPachal
Copy link

I have encountered what I believe to be a bug.

I have a disabled property, which I use to style my polymer widget into a disabled state. This was working fine, until I introduced css variables into my styling.

Here is a simplified example where I have replicated the bug:

<!-- x-button.html -->
<dom-module id='x-button'>

    <style>
        :host {
            /* This breaks it */
            background-color: var(--x-button-background-color, orange);

            /* Un-comment this code, and remove the previous line of code to fix it */
            /*
            background-color: orange;
            */
        }

        :host([disabled]) {
            cursor: default;
            background-color: red;
        }

    </style>

    <template>
        <content></content>
    </template>

</dom-module>

<script>
    Polymer({
        is:'x-button',

        properties: {
            disabled: {
                type: Boolean,
                value: false
            }
        }
    });
</script>

And here is my simple test:

<!-- test.html -->
<!DOCTYPE html>
<html>
    <head>
        <link rel="import" href="../bower_components/polymer/polymer.html">
        <link rel="import" href="./x-button.html">
    </head>
    <body>

        <x-button>Hello</x-button>

        <br><br><br>

        <x-button disabled>I should look different</x-button>

    </body>
</html>

Looking in the Chrome inspector, the styling applied by the disabled selector is being overwritten by the by the regular host styling, but only when css variables are present. Without the css variable, the attribute selector is applied correctly, as described here.

This is the first bug I have ever submitted, sorry if I have done something incorrectly.
@Pupix
Copy link

Pupix commented Jul 8, 2015

#1873
This is the very same problem. That's the way custom styles actually work (for the moment), overwriting all the native CSS that comes after or before them, because the <style> stack in the <head> that polymer adds creates the variables <style> after the native one.

<head>
    <style scope="my-element">native css rules</style> <!-- native css -->
    <style scope="my-element-0">css rules from variables</style> <!-- if any rule is repeated, this will overwrite the native css -->
</head>

@kevinpschaaf
Copy link
Member

Closing as a duplicate of #1873 (which is a P1 issue that is slated for fixing/improvement). @TylerPachal please watch that issue for resolution. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kevinpschaaf @TylerPachal @Pupix