文章/答案/技术大牛

发布

社区首页 >问答首页 >基于Chrome阴影DOM渲染的自定义元素隐藏属性

问基于Chrome阴影DOM渲染的自定义元素隐藏属性
EN

Stack Overflow用户

提问于 2017-02-24 11:13:09

回答 1查看 1.9K关注 0票数 2

在聚合物中使用阴影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元素。

显式设置带有隐藏属性的铁图标样式也有效。

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

google-chrome

polymer

polymer-1.0

web-component

shadow-dom

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-24 11:23:58

这是因为聚合物在<iron-icon>的Shadow中添加了一个<style>元素，该元素具有一个覆盖hidden属性的CSS规则。

<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是为阻止全局[hidden] { display: none !important; } CSS规则的<my-app>元素创建的，该规则是由聚合物iron-flex-layout.html文件添加的。

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

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42437214

复制

相似问题

问基于Chrome阴影DOM渲染的自定义元素隐藏属性
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于Chrome阴影DOM渲染的自定义元素隐藏属性EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于Chrome阴影DOM渲染的自定义元素隐藏属性
EN