Adding background-image to app-header ignored

lucyllewy commented 5 years ago

Please forgive me if this is not specific to PWA Starter Kit. I'm not sure where the problem lies, so I am posting this here to hopefully get some guidance on the correct place to start looking or where else to post the issue.

This is the scenario:

I modified the PWA Starter Kit's my-app.js to include some extra styles to add a background image to the header, which I gathered from the app-header documentation:

app-header {
    background-color: var(--app-header-background-color);
    color: var(--app-header-text-color);
    border-bottom: 1px solid #eee;
    --app-header-background-front-layer: {
        background-position: center center;
        background-image: url(images/header-bg-1600.jpg);
    };
    --app-header-background-rear-layer: {
        background-color: var(--app-header-background-color);
    };
}

The app, however, seemingly ignores these rules. The two variables in the CSS above are not transposed as they should be into the runtime state of the app-header via the @apply CSS rules. This causes the background image to not display at all because the app-header CSS converts it's rules from:

#backgroundFrontLayer {
    @apply --app-header-background-front-layer;
}

#backgroundRearLayer {
    opacity: 0;
    @apply --app-header-background-rear-layer;
}

into (at runtime):

#backgroundFrontLayer {
    ;
}

#backgroundRearLayer {
    opacity: 0;
    ;
}

My app which shows the problem is at https://isitoutyet.info/. The sourcecode is at https://github.com/bowlhat/isitoutyet. Any guidance would be awesome :-)

frankiefu commented 5 years ago

@diddledan There is an issue in shady-render in the latest lit-html that causing this. You can follow the lit-html issue here: https://github.com/Polymer/lit-html/issues/518

lucyllewy commented 5 years ago

awesome, thank you for the link @frankiefu :-)

frankiefu commented 5 years ago

Should be fixed now.

lucyllewy commented 5 years ago

thanks, yes it's fixed now :-)

lucyllewy commented 5 years ago

This appears to be broken again....

JoceM commented 5 years ago

I am having the same problem.

Trying to style the header using mixins has no effect

app-header { position: fixed; top: 0; left: 0; width: 100%; text-align: center; color: var(--app-header-text-color); border-bottom: 1px solid #eee; --app-header-background-rear-layer: { background-color: blue; } --app-header-background-front-layer: { background-color: green;} }

Has anyone found a workaround ?

Polymer / pwa-starter-kit

Adding background-image to app-header ignored #277