内部元素上的聚合物设置自定义 CSS 属性不使用“！重要”

Question

我有一个自定义元素 x-foo，我在上面定义了一个自定义 CSS 属性来设置名为 --xbg 的 background-color。

我使用元素本身作为子元素：

<x-foo class="outer">
  Outer
  <x-foo class="inner">
    Inner 1
  </x-foo>
</x-foo>

当我在外部设置 --xbg 时，该值会覆盖内部元素的值：

x-foo.outer {
  --xbg: orange;
}
x-foo.outer x-foo {
  --xbg: red;
  /* Doesn't work, have to use !important?!?!*/
}

我在 Chrome 中使用了检查器，可以看到子定义确实是 "lower" 然后是父定义。

我必须 "force" 它才能通过 !important 变得更高，然后还有各种其他含义。

x-foo.outer x-foo {
  --xbg: red !important;
  /* Works */
}

为什么子项不覆盖父项属性？

这里有一个 plunker，还有一些例子： https://plnkr.co/edit/uZxg7G?p=preview（仅适用于 Chrome）

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

Answer 1

该元素的优先级低于 class。尝试

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

Answer 2

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

  <style>
    :host {
      display: block;
    }

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

  </style>

就这样，

这是一个有效的Fiddle

Answer 3

仅根据 Andrew 的上述回答，我认为这值得一试——仅使用主机样式似乎可行：

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

https://jsfiddle.net/6tzoacxr/

内部元素上的聚合物设置自定义 CSS 属性不使用“！重要”

Polymer setting custom CSS property on inner element without using "!important"

css

polymer

polymer-1.0

内部元素上的聚合物设置自定义 CSS 属性 不使用“！重要”

Polymer setting custom CSS property on inner element without using "!important"

css

polymer

polymer-1.0

内部元素上的聚合物设置自定义 CSS 属性不使用“！重要”