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目录上传到我的服务器。刷新页面，我希望看到“横向ABC”使用.horizontal.layout提供的iron-flex-layout-classes.html样式，以及“垂直ABC”使用页面head元素内的样式的@apply规则

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

这是第二个：

正如您所看到的，在检查器的CSS区域中，“继承自html”块正在显示所有混合。我很确定它不应该像那样出现在那里。这里是关闭的：

在CSS var定义中包含@apply的行被划掉。我完全糊涂了。我的聚合物安装是否以某种方式搞砸了？但是，我没有错误，并且我的自定义元素似乎有效（除了iron-flex的东西，类或@apply）。

我尝试使用纸质组件，这些组件也可以使用，但看起来没有风格。

任何线索？

提前致谢。

Answer 1

我认为你无法使用iron-flex-layout-classes.html中的风格，因为它们被Shadow 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

您只需要将<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>元素包裹在<custom-element>。

struct A {
    Time t;
    void doStuff(const A&);
    A getStuff();
};

struct B {
    Time t;
    void doStuff(const B&);
    B getStuff();
};

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

2 个答案: