无法让 Polymer 2 iron-flex-layout 工作

Question

在这里用头撞墙。 Barebones Polymer 2.0 项目，能够创建我的自定义组件，但我无法使 iron-flex-layout 或 iron-flex-layout-classes 工作。安装了 Polymer CLI，并使用 bower 安装了 Polymer。

目录结构：

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

index.html

里面 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>

我运行polymer build，上传build/default目录到我的服务器。刷新页面，我希望看到 "Horizontal A B C" 使用 iron-flex-layout-classes.html 提供的 .horizontal.layout 样式，以及 "Vertical A B C" 使用 head 元素内样式的 @apply 规则页面。

这两件事都没有发生。我相信我跟随 guide 到 T 但它不起作用。这是我检查第一个元素时在检查器中看到的内容：

这是第二个：

如您所见，在检查器的 CSS 区域中，"inherited from html" 块显示了所有的混音。我很确定它不应该那样出现在那里。这是特写：

CSS var 定义中包含@apply 的行被划掉。我完全糊涂了。我的 Polymer 安装有问题吗？但是，我没有收到任何错误，并且我的自定义元素似乎可以正常工作（iron-flex 东西除外，类或 @apply）。

我尝试使用纸质组件，它也可以，但看起来没有样式。

有什么线索吗？

提前致谢。

Answer 1

我认为您无法访问 iron-flex-layout-classes.html 中的样式，因为它们被阴影 DOM 掩盖了。您应该使用 CSS 变量来访问它们。此外，您必须将 <style> 包裹在 <custom-style> 中。尝试 this 代码：

<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>

Answer 2

您只需用 <custom-element>.

包裹您的 <style> 元素

<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>

无法让 Polymer 2 iron-flex-layout 工作

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

javascript

css

flexbox

polymer

polymer-2.x