在 Polymer 2.x 的主要内容中设置不透明度时，应用程序抽屉出现故障

Question

在主要内容上设置 opacity 属性会导致内容在打开抽屉时从 app-drawer 渗出。（我认为这是一个错误，而不是一个功能？）最好的解决方案或解决方法是什么？

Here is the link to the issue filed on Github.

预期结果

我希望 app-drawer 不透明地涵盖所有主要内容。即使主要内容在 CSS 中设置了 opacity 属性，如下所示。

<style>
  #main {
    opacity: 0.8;
  }
</style>

实际结果

当抽屉打开时，主要内容中的文字出现在抽屉前面。请参阅下面的屏幕截图。

现场演示

Here is the Plunker demo。 （如果使用 Safari，请改为在 Chrome 中查看演示。）

重现步骤

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.rawgit.com/download/polymer-cdn/2.0.0/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="my-drawer.html">
</head>

<body>
  <my-drawer></my-drawer>
</body>

</html>

我的-drawer.html

<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="app-layout/app-drawer/app-drawer.html">

<dom-module id="my-drawer">

  <template>
    <style>
      #main {
        opacity: 0.8;
      }
    </style>

    <app-header reveals>
      <app-toolbar>
        <paper-icon-button icon="menu" on-tap="_toggleDrawer"></paper-icon-button>
        <div main-title>Title</div>
        <paper-icon-button icon="search"></paper-icon-button>
      </app-toolbar>
    </app-header>

    <app-drawer id="drawer" opened={{drawerOpened}} tabindex="0">
      <div>I am inside drawer</div>
    </app-drawer>

    <div id="main">
      My "opacity" property makes me "bleed" through the drawer
    </div>

  </template>

  <script>
    class MyDrawer extends Polymer.Element {

      static get is() {
        return 'my-drawer';
      }

      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'my-drawer'
          }
        };
      }

      _toggleDrawer() {
        this.drawerOpened = !this.drawerOpened;
      }

    }

    customElements.define(MyDrawer.is, MyDrawer);
  </script>

</dom-module>

受影响的浏览器

Chrome
全部测试

Answer 1

我的解决方法是将 z-index: 1 样式属性添加到我的 <app-drawer> 元素。

Answer 2

实际代码 ~~已接受~~ @Neilujd 的回答：

我的-drawer.html

<style>
  #main {
    opacity: 0.8;
  }
  app-drawer {
    z-index: 1;
  }
</style>

Answer 3

另一个解决方案是使用 app-drawer-layout:

使用 app-drawer-layout 包装 app-drawer 和 div。在 app-drawer 中添加 slot="drawer" 这样 wrapper 元素就会知道它是 drawer 元素。

修改后的 plnkr：https://plnkr.co/edit/akTqpcmGzODgZ0gNAWnj?p=preview

代码改动：

<app-drawer-layout>
  <app-drawer slot="drawer" id="drawer" opened={{drawerOpened}} tabindex="0">
    <div>I am inside drawer</div>
  </app-drawer>
  <div id="main">
    My "opacity" property makes me "bleed" through the drawer
  </div>
</app-drawer-layout>

在 Polymer 2.x 的主要内容中设置不透明度时，应用程序抽屉出现故障

app-drawer malfunctions when opacity is set in main content in Polymer 2.x

polymer

app-elements

polymer-2.x

预期结果

实际结果

现场演示

重现步骤

受影响的浏览器