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

Question

I am trying to integrate some Polymer components I created with Material Design Lite. However, they just don't render anything, it's as if material design couldn't work with Polymer components.

These are the steps i follow to create a HTML+Material Design side menu:

Plain Material Design Lite side Menu:

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

Now, as a test, I create a nav-menu.html Polymer element with some markup:

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

Then, it's included before the menu and rendered OK:

HTML:

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

Rendered code:

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

Now, I change the nav-menu.html component to include the full menu:

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

and include it in the main page:

<nav-menu/>

This is the rendered HTML code (seen on chrome developer tools inspect):

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

Apparently it's OK, however, the page doesn't show anything, it's just blank.

UPDATE: The problem seems to be that the media query style that shows the menu doesn't apply to the new element:

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

Since the polymer element is nested in a <nav-menu> tag, the CSS style isn't applied. Any suggestions?

Answer 1

Solved it removing the nested <div class="mdl-layout__drawer style-scope nav-menu"> from the Polymer component and applying the style directly in the HTML:

nav-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"/>