Question

我有一个自定义元素x-foo我已经定义了一个自定义CSS属性来设置名为background-color的{{1}}。

我使用带有自身元素的元素作为子元素：

--xbg

当我在外部设置<x-foo class="outer"> Outer <x-foo class="inner"> Inner 1 </x-foo> </x-foo>时，该值会覆盖内部元素的值：

--xbg

我在Chrome中使用了检查器，可以看到子定义确实比父级定义“更低”。

我必须“强制”它以x-foo.outer { --xbg: orange; } x-foo.outer x-foo { --xbg: red; /* Doesn't work, have to use !important?!?!*/ }获得更高，然后有各种其他含义。

!important

为什么孩子没有覆盖父母属性？

这里有一个更多的例子： https://plnkr.co/edit/uZxg7G?p=preview（仅适用于Chrome）

更简单的JSBin用于其他浏览器： http://jsbin.com/wuqobejeci/edit?html,output

Answer 1

元素的优先级低于类。试试

x-foo.outer {
  --xbg: orange;
}
x-foo.outer x-foo.inner {
  --xbg: red;
}

Answer 2

解决此问题的最佳方法是说该样式仅适用于来自该主机的类contentwrapper

  <style>
    :host {
      display: block;
    }

    :host > .contentwrapper {
      padding: 1em;
      background-color: var(--xbg, yellow);
    }

  </style>

就像那样，

这是一个有效的Fiddle

Answer 3

认为这是值得尝试的，只是基于安德鲁的答案 - 仅仅使用主机风格似乎有效：

<style>
  :host {
    display: block;
    padding: 1em;
    background-color: var(--xbg, yellow);
  }
</style>

https://jsfiddle.net/6tzoacxr/

聚合物在内部元素上设置自定义CSS属性，而不使用“！important”

3 个答案: