Material Design Lite + Polymer 无法协同工作 - 它不显示任何内容

Question

我正在尝试集成我使用 Material Design Lite 创建的一些 Polymer 组件。但是，它们只是不渲染任何东西，就好像 material 设计无法使用 Polymer 组件一样。

这些是我创建 HTML+Material 设计侧边菜单所遵循的步骤：

普通 Material Design Lite 侧面菜单:

<div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Menu</span>
    <nav class="mdl-navigation">
        <a href="" class="mdl-navigation__link">Link 1</a>
        <a href="" class="mdl-navigation__link">Link 2</a>
        <a href="" class="mdl-navigation__link">Link 3</a>
        <a href="" class="mdl-navigation__link">Link 4</a>
    </nav>
</div>

现在，作为测试，我创建了一个带有一些标记的 nav-menu.html 聚合物元素：

<dom-module id="nav-menu">

  <template>
    <p>I'm a DOM element. This is my local DOM!</p>
  </template>

  <script>
    Polymer({
      is: "nav-menu"
    });
  </script>

</dom-module>

然后，它包含在菜单之前并呈现 OK:

HTML:

<nav-menu/>
<div class="mdl-layout__drawer">
...

渲染代码:

<nav-menu>
    <p class="style-scope nav-menu">I'm a DOM element. This is my local DOM!</p>
</nav-menu>
<div class="mdl-layout__drawer">

现在，我更改 nav-menu.html 组件以包含完整菜单：

<dom-module id="nav-menu">

  <template>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Express</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href=""> Link 1</a>
        <a class="mdl-navigation__link" href=""> Link 2</a>
        <a class="mdl-navigation__link" href=""> Link 3</a>
        <a class="mdl-navigation__link" href=""> Link 4</a>
      </nav>
    </div>
  </template>

  <script>
    Polymer({
      is: "nav-menu"
    });
  </script>

</dom-module>

并将其包含在主页中：

<nav-menu/>

这是呈现的 HTML 代码（在 chrome 开发人员工具检查中看到）：

  <nav-menu>
    <div class="mdl-layout__drawer style-scope nav-menu">
      <span class="mdl-layout-title style-scope nav-menu">Express</span>
      <nav class="mdl-navigation style-scope nav-menu">
        <a class="mdl-navigation__link style-scope nav-menu" href=""> Link 1</a>
        <a class="mdl-navigation__link style-scope nav-menu" href=""> Link 2</a>
        <a class="mdl-navigation__link style-scope nav-menu" href=""> Link 3</a>
        <a class="mdl-navigation__link style-scope nav-menu" href=""> Link 4</a>
    </nav></div>
  </nav-menu>

貌似没问题，但是页面什么也没有显示，就是一片空白。

更新：问题似乎是显示菜单的媒体查询样式不适用于新元素：

@media screen and (min-width: 1025px)
.mdl-layout--fixed-drawer>.mdl-layout__drawer {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

由于聚合物元素嵌套在 <nav-menu> 标记中，因此未应用 CSS 样式。有什么建议吗？

Answer 1

解决了从 Polymer 组件中移除嵌套 <div class="mdl-layout__drawer style-scope nav-menu"> 并直接在 HTML 中应用样式的问题：

导航-menu.html:

<dom-module id="nav-menu">

  <template>
    <span class="mdl-layout-title">Menu</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href=""> Link 1</a>
      <a class="mdl-navigation__link" href=""> Link 2</a>
      <a class="mdl-navigation__link" href=""> Link 3</a>
      <a class="mdl-navigation__link" href=""> Link 4</a>
    </nav>
  </template>

  <script>
    Polymer({
      is: "nav-menu"
    });
  </script>

</dom-module>

HTML:

<nav-menu class="mdl-layout__drawer"/>

Material Design Lite + Polymer 无法协同工作 - 它不显示任何内容

Material Design Lite + Polymer not working together - It doesn't display anything

html

css

web-component

polymer

material-design-lite