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

我有一个自定义元素

x-foo

，我在它上面定义了一个自定义CSS属性来设置

背景色

，名为

--xbg

我将元素本身的元素作为子元素使用，如下所示：

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

我在Chrome中使用了inspector，可以看到子定义确实比父定义“低”

我必须用

来“强制”它变得更高！重要的

，这会产生其他各种影响

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

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

下面是一个例子： （仅适用于铬合金）

对于其他浏览器更简单的JSBin：

---

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

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

---

解决这一问题的最佳方法是说样式只应用于该主机下的contentwrapper类

  <style>
    :host {
      display: block;
    }

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

  </style>

：主持人{
显示：块；
}
：host>.contentwrapper{
填充：1em；
背景色：var（--xbg，黄色）；
}

就这样,

---

以下是一个实用的

基于Andrew的上述回答，我认为这是值得尝试的——仅仅使用主持人风格似乎是可行的：

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

：主持人{
显示：块；
填充：1em；
背景色：var（--xbg，黄色）；
}

---

似乎无法重现这一点；Plunkr没有设计这些元素的样式。。。你错过图书馆了吗？编辑：哦，它是纯铬的。我认为示例2应该有一个红色的

，就像示例3一样。@TylerH不应该是纯铬的，但我猜我在plunker中遗漏了一些东西。@GünterZöchbauer-你什么意思？我也认为它应该是红色的，但它不是，这就是问题所在：）这就是我试图向@TylerH解释的：DDoS也不起作用，在plunker中添加了示例4，或者您认为

id

选择器是否有干扰？耶！真管用！但是为什么呢？我以为我们生活在一个防泄漏的阴影中？i、 我认为每个实例都是它自己的主机，所以所有的样式都只会隐式地影响该主机？这很奇怪，但因为它是内容，所以可以使用css选择器：：content.contentwrapper来选择它，如果你把它放在一边（所以不是内容），它仍然会被.contentwrapper选中它不会“泄漏”。oops:：content>.contentwrapper是我想说的不确定我是否完全遵循了，你的意思是内部的

x-foo

可以通过外部的

：：content>.contentwrapper

访问，因此它泄漏了？你认为这种行为是故意的吗？对不起，我不太善于解释自己，是的，这就是我的意思。我想这可能是一只虫子（或者他们只是生活在一起的东西）。它就在那里，所以你可以设计h3内容的样式（例如），你可以说：：：content h3{color:blue；}然后，x-foo中的h3标记将是蓝色的，但不会泄漏到它之外。也许这会有帮助

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