Unable to get Polymer 2 iron-flex-layout to work

user_2263357 0
Viewed 477

Banging my head against the wall here. Barebones Polymer 2.0 project, able to create my custom components, I can't get iron-flex-layout or iron-flex-layout-classes to work. Installed Polymer CLI, and installed Polymer using bower.

Directory structure:

/bower_components
    polymer, webcomponentsjs, iron-flex-layout, shadycss

index.html

Inside index.html:

<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html"/>

    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout-classes.html">

    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>

    <style is="custom-style">

        .mixed-in-vertical-layout {
            @apply(--layout-vertical);
        }

    </style>

</head>

<body>

    <div class="horizontal layout">
        <div>Horizontal</div> <div>A</div> <div>B</div> <div>C</div>
    </div>

    <div class="mixed-in-vertical-layout">
        <div>Vertical</div> <div>A</div> <div>B</div> <div>C</div>
    </div>

</body>
</html>

I run polymer build, and upload the build/default directory to my server. Refreshing the page, I expect to see "Horizontal A B C" to use .horizontal.layout style provided by iron-flex-layout-classes.html, and "Vertical A B C" to use @apply rule from style inside head element of the page.

Neither of those things are happening. I believe I followed the guide to the T and it doesn't work. Here's what I see in the inspector when I inspect the first element:

Styles not showing up

And here's second:

Injection doesn't work

As you can see, in the CSS area of the inspector, "inherited from html" chunk is displaying all the mix-ins. I'm pretty sure it's not supposed to show up in there like that. And here's close up:

A few rules are crossed out by Chrome

Lines that contain @apply in CSS var definitions are crossed out. I'm totally confused. Is my installation of Polymer messed up somehow? I get no errors, however, and my custom elements appear to work (except for the iron-flex stuff, classes or @apply).

I tried using paper components, which also work, but appear un-styled.

Any clues?

Thanks in advance.

polymer-2.x polymer flexbox css javascript
2 Answers

I'm thinking you can't get to the styles in iron-flex-layout-classes.html because they are masked by the Shadow DOM. You should use the CSS variables to get to them. Also, you must wrap your <style> in <custom-style>. Try this code:

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html"/>
    <link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">

    <custom-style>
      <style is="custom-style">
        .mixed-in-vertical-layout {
          @apply --layout-vertical;
        }
        .horizontal-layout {
          @apply --layout-horizontal;
        }
      </style>
    </custom-style>

  </head>
  <body>

    <div class="horizontal-layout">
      <div>Horizontal</div> <div>A</div> <div>B</div> <div>C</div>
    </div>

    <div class="mixed-in-vertical-layout">
      <div>Vertical</div> <div>A</div> <div>B</div> <div>C</div>
    </div>

  </body>
</html>
user_13160110

You just need to wrap your <style> element with <custom-element>.

<html lang="en">

<head>
  <meta charset="UTF-8">

  <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="https://polygit.org/components/polymer/polymer.html" />

  <link rel="import" href="https://polygit.org/components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="https://polygit.org/components/iron-flex-layout/iron-flex-layout-classes.html">

  <custom-style>
    <style include="iron-flex iron-flex-alignment"></style>
  </custom-style>
  
  <custom-style>
    <style>
      .mixed-in-vertical-layout {
        @apply --layout-vertical;
      }
    </style>
  </custom-style>

</head>

<body>

  <div class="horizontal layout">
    <div>Horizontal</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>

  <div class="mixed-in-vertical-layout">
    <div>Vertical</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </div>

</body>

</html>

user_17249740
Related