mwc-button renders above polymer app-drawer

[gdevacc12]

When trying to use mwc-button within a pwa-starter kit view, the mwc-button in view lit-element renders incorrectly over the app-drawer (polymer) when the draw is opened instead of being under the draw and hidden from view. By contract mwc-icon renders correctly and appears covered by the drawer when it's opened.

Steps to reproduce git clone --depth 1 -b template-no-redux --single-branch https://github.com/Polymer/pwa-starter-kit test-mwc-button cd test-mwc-button npm install npm install --save @material/mwc-button

edit ./src/components/my-view1.js add: import {Button} from "@material/mwc-button" after (import { PageViewElement } from './page-view-element.js';) add: after

Welcome

save force the draw: edit my-app.js remove the @media section to disable wide layout save

Try: point the browser to http://localhost:4440 click the menu icon You see the button Test appears rendered above the drawer

Similarly I added mwc-icon but this renders correctly (hidden by the drawer when opened).

Component versions:

+-- @material/mwc-button@0.6.0 +-- @material/mwc-icon@0.6.0 +-- @polymer/app-layout@3.0.2 +-- @polymer/polymer@3.2.0 +-- @polymer/test-fixture@4.0.2 +-- @webcomponents/webcomponentsjs@2.2.7 +-- axe-core@3.2.2 +-- chai@4.2.0 +-- del@3.0.0 +-- gulp@4.0.0 +-- gulp-rename@1.4.0 +-- gulp-replace@1.0.0 +-- lit-element@2.1.0 +-- mocha@5.2.0 +-- pixelmatch@4.0.2 +-- polymer-cli@1.9.7 +-- polyserve@0.27.15 +-- prpl-server@1.4.0 +-- puppeteer@1.13.0 +-- pwa-helpers@0.9.1 `-- wct-mocha@1.0.0

[gdevacc12]

A work around is to add the following style to the element importing app-drawer. app-drawer { z-index: 1; }

This worked with app-layout 3.1.0

[e111077]

delegating this issue to mwc-button and app-layout