[2.0-preview] Iron Flex Layout CSS properties does not apply

[avivien]

The CSS properties (--layout-vertical, --layout-flex, --layout-fit, ...) of the iron-flex-layout.html import does not apply on the paper-header-panel element. It seems that the properties are not accessible.

For example the @apply --layout-vertical; of the :host style

<style>
      :host {
        @apply --layout-vertical;
        position: relative;
        height: 100%;
        @apply --paper-header-panel;
      }

is replace by the following style in the browser:

:host {
  ;
  position: relative;
  height: 100%;
  ;
}

Example of code:

<!--
<!-- Load the Polymer.Element base class -->
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">

<dom-module id="my-app">
  <template>

    <!-- Styles MUST be inside template -->
    <style>
      :host {
        position: relative;
        display: block;
        height: 100%;
      }
    </style>

    <paper-header-panel mode="seamed">
      <paper-toolbar slot="header">Header</paper-toolbar>
      <div slot="content"class="fit">Content goes here...</div>
    </paper-header-panel>

  </template>

  <script>

    // Extend Polymer.Element base class
    class MyApp extends Polymer.Element {

      static get is() { return 'my-app' }

      static get config() {
        // properties, observers meta data
        return {};
      }

      connectedCallback() {
        super.connectedCallback();
      }

    }

    // Register custom element definition using standard platform API
    customElements.define(MyApp.is, MyApp);

  </script>
</dom-module>