在 Chrome 中具有阴影 DOM 渲染的自定义元素上的隐藏属性答案

【问题标题】：hidden attribute on custom elements with shadow DOM rendering in Chrome在 Chrome 中具有阴影 DOM 渲染的自定义元素上的隐藏属性
【发布时间】：2017-07-15 04:49:59
【问题描述】：

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

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

这是一个使用iron-icon的Chrome浏览器示例

<!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>

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

将window.Polymer.dom 更改为shady 时，它会正确隐藏iron-icon 元素。

使用 hidden 属性为 iron-icon 显式设置样式也可以。

iron-icon[hidden] {
  display: none;
}

【问题讨论】：

标签： google-chrome polymer polymer-1.0 web-component shadow-dom

【解决方案1】：

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

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

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

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>`

#I1[hidden] {
    display: none ;
}

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

更新

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

shadow 模式实际上只适用于实现 Shadow DOM 的浏览器（Chrome、Opera），这就是为什么在 Firefox 或 Safari 上呈现不同的原因。

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

【讨论】：