Adapting to Polymer: Should I put my classes on the <polymer-element> or nest my original div within?

[Scott Beeson]

This is what my original UI component looked like:

      <div class="entity size1x1">

          <div class="name">Server-Name</div>

      </div>

Now that I'm adapting to Polymer, can/should I do this?

<polymer-element name="one-entityCard" class="entity size1x1">

  <template>

      <div class="name">Server-Name</div>

      <link rel="stylesheet" href="one-entityCard.css" />

  </template>

</polymer-element>

[Scott Beeson]

I'm new to Groups, sorry. Since I can't edit, I'm going to repost with some formatting in an attempt to train myself... (And for readability) :(

[Rob Dodson]

It's hard to say exactly what the right solution is because I don't know what styles entity applies or what size1x1 does. But here's what I'm thinking...

Instead of applying the size1x1 class to your element you could write a generic entity-card that can handle all the different sizes by adding :host styles to your element stylesheet:

:host(.size1x1) {...}
:host(.size2x2) {...}
:host(.size3x3) {...}
etc.

Then someone could write out:

<entity-card class="size3x3"> and the styles would take effect.

I'm not sure I see the value of the one-* prefix, unless it's to denote the name of your element set. I might just call this thing 'entity-card'. Are there other entity things in your set? If so you may think about extending a base entity element or writing out a generic entity stylesheet and linking to it

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/26f4d069-84a7-4f59-a301-8761cbeb7cfe%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Scott Beeson]

Yeah the "one" prefix is for the internal app we are designing.  Just helps keep it separate from any core or paper elements I'm using, I guess.

And thanks for confirming that it's acceptable to use the element as I'd hoped.  Also, you're completely right about the size1x1 class, thanks for pointing that out.  I hopefully would have realized it once I got over the hump of converting the card :)