自定义元素的隐藏属性，阴影 DOM 在 Chrome 中呈现

Question

当使用 shadow DOM 在 polymer 中渲染而不是 shady DOM 我注意到自定义元素不能用全局属性隐藏 hidden.

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

这是 Chrome 浏览器使用 iron-icon

的示例

<!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 元素。

为具有隐藏属性的 iron-icon 显式设置样式也可以。

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

Answer 1

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

<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 模式，阴影 DOM 是为您的 <my-app> 元素创建的，它阻止了全局 [hidden] { display: none !important; } CSS 规则，已添加通过 Polymer iron-flex-layout.html 文件。

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

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

自定义元素的隐藏属性，阴影 DOM 在 Chrome 中呈现

hidden attribute on custom elements with shadow DOM rendering in Chrome

google-chrome

web-component

shadow-dom

polymer

polymer-1.0