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>

受影响的浏览器

铬
全部测试

Answer 1

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

Answer 2

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

使用div换行app-drawer-layout和slot="drawer"。在app-drawer中添加<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>，以便包装元素知道它是抽屉元素。

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

代码中的更改：

  var  arrayOne = ["Air Conditioning", "Filters", "Heating", "Holidays", "HVAC/R Tips", "IAQ", "Labor Shortage", "Products"];
  var C=[];

$(".dropdown-menu .filterMenu a").each(function(key,value){
   if ($.inArray($(value).text(), arrayOne ) == -1){
       C.push($(value).text());
       $(value).parent().remove()

   }
});
console.log(C);

Answer 3

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