Question

在聚合物中使用阴影DOM渲染而不是阴影DOM时，我注意到自定义元素无法使用全局属性iron-icon隐藏。

这似乎只会影响Chrome，因为它会在Safari和Firefox中隐藏元素（IE未知）。

以下是使用<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script> <script> // Setup Polymer options window.Polymer = { dom: 'shadow' }; </script> <link rel="import" href="https://polygit.org/components/polymer/polymer.html"> <link rel="import" href="https://polygit.org/components/iron-icon/iron-icon.html"> <link rel="import" href="https://polygit.org/components/iron-icons/iron-icons.html"> </head> <body> <my-app></my-app> <dom-module id="my-app"> <template> <p> hidden: <iron-icon icon="bug-report" hidden></iron-icon> </p> <p> visible: <iron-icon icon="check"></iron-icon> </p> </template> <script> Polymer({is: 'my-app'}); </script> </dom-module> </body> </html>

的Chrome浏览器的示例

window.Polymer.dom

https://jsbin.com/xetiboboya/4/edit?html,output

将shady更改为iron-icon时，它会正确隐藏iron-icon[hidden] { display: none; }元素。

使用隐藏属性明确设置铁图标的样式也可以。

{{1}}

Answer 1

这是因为Polymer在<iron-icon>的Shadow DOM中添加了<style>元素，其中CSS规则覆盖了hidden属性。

<style>
   :host { 
       display: inline-flex;
   }
</style>

此规则本身会被您添加的规则覆盖。

＆＃13;

I1.attachShadow( { mode: 'open' } )
  .innerHTML = `icon 1
<style>
    :host { 
        display: inline-flex ;
        color: red ;
    }
</style>`

I2.attachShadow( { mode: 'open' } )
  .innerHTML = `icon 2
<style>
    :host { 
        display: inline-flex ;
        color: red ;
    }
</style>`

＆＃13;

#I1[hidden] {
    display: none ;
}

＆＃13;

<iron-icon id=I1 hidden></iron-icon>
<iron-icon id=I2 hidden></iron-icon>

＆＃13;

<强>更新

此外，由于shadow模式，Shadow {是为阻止全局<my-app> CSS规则的[hidden] { display: none !important; }元素创建的，由Polymer iron-flex-layout.html文件添加。< / p>

shadow模式实际上仅适用于实施Shadow DOM（Chrome，Opera）的浏览器，这就是Firefox或Safari上呈现方式不同的原因。

查看修订后的JSBin：https://jsbin.com/qolegopago/edit?html,output

Chrome中使用阴影DOM渲染的自定义元素的隐藏属性

1 个答案: