在 Polymer 2.x 的主要内容中设置不透明度时，app-drawer 出现故障答案

【问题标题】：app-drawer malfunctions when opacity is set in main content in Polymer 2.x在 Polymer 2.x 的主要内容中设置不透明度时，app-drawer 出现故障
【发布时间】：2017-08-18 14:45:36
【问题描述】：

在主要内容上设置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 中查看演示。）

重现步骤

索引.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>

我的抽屉.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>

受影响的浏览器

铬
所有测试

【问题讨论】：

标签： polymer polymer-2.x app-elements

【解决方案1】：

另一种解决方案是使用app-drawer-layout：

使用app-drawer-layout 包装app-drawer 和div。在app-drawer 中添加slot="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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

~~accepted~~ 的实际代码@Neilujd 的回答：

我的抽屉.html

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

【讨论】：