无法使Polymer 2铁-挠性布局工作

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”使用iron-flex-layout-classes.html提供的.horizontal.layout样式，以及“垂直ABC”使用页面head元素内的样式中的@apply规则。

这些事情都没有发生。 我相信我遵循了T 指南，但它没有用。 这是检查第一个元素时在检查器中看到的内容：

这是第二个：

如您所见，在检查器的CSS区域中，“继承自html”块显示所有混入。 我很确定它不应该那样出现。 然后关闭：

CSS var定义中包含@apply的行被划掉。 我很困惑。 我的Polymer安装是否以某种方式弄乱了？ 我没有收到任何错误，但是我的自定义元素似乎可以正常工作（iron-flex东西，类或@apply除外）。

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

有什么线索吗？

提前致谢。

Answer 1

我认为您无法使用iron-flex-layout-classes.html的样式，因为它们被Shadow DOM遮盖了。 您应该使用CSS变量来访问它们。 另外，您必须将<style>包装在<custom-style> 。 试试这个代码：

<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铁-挠性布局工作

问题描述

2 个解决方案

解决方案1
3 2017-10-04 20:48:44

解决方案2
3 已采纳 2017-10-05 01:19:06

无法使Polymer 2铁-挠性布局工作

问题描述

2 个解决方案

解决方案1 3 2017-10-04 20:48:44

解决方案2 3 已采纳 2017-10-05 01:19:06

解决方案1
3 2017-10-04 20:48:44

解决方案2
3 已采纳 2017-10-05 01:19:06