0

I have been reading docs all over the place. Even got to 10th page of some google searches. I cannot figure out how to style a polymer element from a regular CSS file.

We are using just 1 or 2 polymer elements in our application, in particular, the paper-input. The blue for its focused state and the red for its error state must be changed to match the theme of the app.

It seems like polymer provides some stuff like this: --paper-input-container-color Which I am assuming affects a variable in the elements internal stylesheet. Can I use these from my regular stylesheet? If so, how? If I cannot, how do I style this thing?

All of the documentation seems to point to making your own custom elements and then styling them. This is not what I want to do. I do not want to wrap the paper-input in another custom element. I just want to change some colors. The functionality of the paper-input is enough for my use case.

Is this even possible?

Duder-onomy
  • 29
  • 5
  • Duplicate? Short sited on your part. That post tells you how to style the tag with a special stylesheet using special syntax. I need to style the tag with the rest of my CSS. Considering that people are working on real projects, I cannot expect junior developers to know that special elements are styles in a special part of the app. I am looking for regular CSS that can be done in a normal CSS workflow. – Duder-onomy Feb 11 '16 at 18:57
  • These tags mentioned in the other answer do not need to go into a special style sheet, they can be style elements inside your normal CSS workflow. WHAT is special is a) It needs polymer to interpret the --element variables and convert them to regular css and b) the style tag needs the is="custom-style" for polymer to find them. You NEED to use the special tags to style parts of the inside of the element. you can't get at it from the outside as its encapsulated. – akc42 Feb 11 '16 at 19:56
  • So where do they go? (sorry about the edits. This input saves on enter and not line break) Can I put them right next to the rest of my form element styling? – Duder-onomy Feb 11 '16 at 19:59
  • Well I don't know your current styling structure or your workflow, but assuming you have style tags in .css files, or even in the main .html file you should be fine. Just follow the answer given. – akc42 Feb 11 '16 at 20:05
  • Ok, I understand what you want. Yeah, we use stylesheets, not style tags. Complied with SCSS. Not clean enough for massive apps. I will do some research and into how this works behind the scenes and maybe update my answer later. I guess I will be forced to write some code to search my CSS for any styles attributed to polymer elements, move them to a html file, inside a style tag with the special attribute. Could be a useful npm for people using this in real applications. Just a bummer to hear because I thought the intention of polymer was to extend the DOM. Styling the DOM is done with CSS. – Duder-onomy Feb 11 '16 at 20:36

0 Answers0