Polymer 1.0: Is there any way to use 'layout' as an attribute instead of as a CSS class or using Attribute serialization in the class attribute?

Question

I have built my application in polymer 0.5.

Now I have updated it to polymer 1.0.

For responsive layout I have used a layout attribute using custom logic of layout attributes in the Polymer 0.5.

See the code below:

<template is="auto-binding">
<core-media-query query="max-width: 767px" queryMatches="{{smallScreen}}"></core-media-query>
<section layout vertical?="{{smallScreen}}" horizontal?="{{!smallScreen}}">
    <section flex four?="{{!smallScreen}}" auto?="{{smallScreen}}">
        <paper-input-decorator label="First name" floatingLabel>
            <input type="text" is="paper-input" id="fname" name="fname">
        </paper-input-decorator>
    </section>
    <section flex four?="{{!smallScreen}}" auto?="{{smallScreen}}">
        <paper-input-decorator label="Last name" floatingLabel>
            <input type="text" is="paper-input" id="lname" name="lname">
        </paper-input-decorator>
    </section>
</section>
</template>

Now in polymer 1.0 introduce one element "iron-layout-flex" and all indications are that now instead of attributes we must work with the classes ".layout", ".horizontal", ".vertical"? It is very confusing that how should I adjust as per my logic of the layout attribute.

So, my question is that Is there any way to use 'layout' as an attribute instead of as a CSS class or using Attribute serialization in the class attribute?

Answer 1

Well, you could theoretically translate attributes to the new layout css properties. Something like this (untested, so no guarantees this will actually work)

<style is="custom-style">
  html /deep/ [layout][vertical] {
    @apply(--layout-vertical);
  }

  html /deep/ [layout][horizontal] {
    @apply(--layout-horizontal);
  }

  html /deep/ [flex][four] {
    @apply(--layout-flex-4);
  }

  html /deep/ [flex][auto] {
    @apply(--layout-flex-auto);
  }
</style>