CODEWITHSUNDEEP
polymer
akc42
akc42

Reputation: 5001

Polymer Progressive Web App, placement of CSS theming variables

I am trying to restructure my Polymer app to use the progressive web app techniques expoused at Google IO. I have a slight complication in that I need ensure the user is logged on before I can launch the app, so it will be structured so that index.html has a single <my-session> element embedded within it, and that element has the <my-app> element embedded within it.

The question is where to locate the CSS which defines the theming variables (such as --app-primary-color, and --app-accent-color etc). In the examples, they are defined under the :host selector inside the <my-app> element. In my case, that is too late, because I want to also theme my login form and the paper spinner I throw up whilst handing the session establishment.

It seems inappropriate (a vague term I know) to define these CSS theming variables inside <my-session>, so I was wondering if there is any downside in defining them inside a <style> tag with the :root selector inside index.html?

From reading the docs I don't think I need to declare <style is="custom-style"> to define the custom variables, so no need to import polymer.html into index.html.

Upvotes: 1

Views: 82

Answers (1)

Kayce Basques
Kayce Basques

Reputation: 25917

In keeping with the mediator pattern, I think you are best off creating a new, top-level element that represents your app. This is where your theming variables would be defined. The element that you previously called <my-app> should be renamed to something else. It's just a subcomponent of your app that changes depending on whether the user is logged in or not. You'd probably be fine defining it in index.html, but as time goes by you'll probably be happy that you have access to all of the full Polymer features.

<my-app> // define your styles in this new top-level element <my-session> // styles defined in <my-app> cascade down to here <my-dashboard> // previously called <my-app>, just an example name...

Upvotes: 2

Related Questions