Polymer 1.0 iron-flex-layout仅适用于某些标签

Question

更新:聚合物文档现已更新,以反映下面的答案

我正在做一个聚合物1.0应用程序.

我正在尝试在屏幕的一部分水平布局一些纸质工具栏.
看来我可以使用iron-flex-layout的@apply( - layout-horizo​​ntal)来处理某些元素而不是其他元素.

我在下面放了一个小测试来显示最新情况.
有趣的是,如果我将--layout-horizo​​ntal风格的内容复制到chrome dev工具中的标签中,它就可以工作.如果我只是将--layout-horizo​​ntal的内容复制到新样式中,它也可以工作.

这是最近发生的例子.

第一个div是0.5到1.0迁移指南中的示例.
第二个div是示例,而是尝试布局一个部分而不是跨度.
第三行是我明确复制并应用--layout-horizo​​ntal风格的地方.

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

<dom-module id="layout-test">

    <style>
        /* Example from migration guide */
        .header {
            @apply(--layout-horizontal --layout-center);
        }

        /* A hack that makes it work */
        .hack {
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;

            -ms-flex-direction: row;
            -webkit-flex-direction: row;
            flex-direction: row;
        }
    </style>

    <template>

        <!-- Working example from migration guide  -->
        <div class="header">
            <img src="https://www.polymer-project.org/images/logos/lockup.svg">
            <span class="name">name</span>
        </div>

        <!-- This example does not work  -->
        <div class="header">
            <img src="https://www.polymer-project.org/images/logos/lockup.svg">
            <section class="name">name</section>
        </div>


        <!-- This hack works fine -->
        <div class="hack">
            <img src="https://www.polymer-project.org/images/logos/lockup.svg">
            <section class="name">name</section>
        </div>

    </template>
</dom-module>
<script type="text/javascript">
    Polymer({
        is: 'layout-test'
    });
</script>

完整项目可在此处获得https://github.com/nburn42/polymer-1.0-LayoutTest

谢谢,
内森

Answer 1

根据Polymer的github上的问题1601(https://github.com/Polymer/polymer/issues/1601),他们改变了Custom CSS mixins传递给@apply的方式.不必在单个@apply调用中链接多个mixin,而是必须将它们分开.这意味着以下代码段:

  .header {
        @apply(--layout-horizontal --layout-center);
    }

变为:

  .header {
        @apply(--layout-horizontal);
        @apply(--layout-center);
    }

聚合物确实需要更新文档以及其站点上的示例,因为这样的更改未被反映将导致更少的人采用Polymer.