Styling a custom element in Polymer

Question

I am working on a Polymer project, and am struggling because the code was written for Polymer 0.5. As I am inspecting the element, I see something like this:

<custom-elem layout vertical center center-justified style="width: 25%;">
  <h1>Yay! </h1>
  <p>
    awesome!
  </p>
</custom-elem>

When I mess around with removing the "layout, vertical, center, center-justified" in the element inspector, it changes the layout in the legacy (Polymer 0.5) code. When I try to implement the same thing in 1.0, no styles are applied and when removed nothing changes.

What are these classes? Are they some sort of legacy code from Polymer 0.5? Thank you.

score 0 · Accepted Answer · answered Apr 05 '16 at 09:25

0

https://elements.polymer-project.org/elements/paper-styles

Instead of attributes classes are now used because attributes were slow on some browsers.

answered Apr 05 '16 at 09:25

Günter Zöchbauer

623,577
216
2,003
1,567

but these attributes are part of some sort of external library, or are they contained within Polymer? – Giancarlo Manuel Guerra Salvá Apr 05 '16 at 09:39
They are one of the additional packages Polymer provides. There was some controversy about including these styles by default in Polymer 0.5 (about size and conflicts with other CSS frameworks). AFAIR this is why you now need to opt in. – Günter Zöchbauer Apr 05 '16 at 09:42
Ah I see. I saw some other questions and saw that the layout verticals and centers are included within paper-styles. Thanks a lot! – Giancarlo Manuel Guerra Salvá Apr 05 '16 at 09:44

Styling a custom element in Polymer

1 Answers1