如何在没有 !important 的情况下使用适当的特异性设置 :root 样式答案

【问题标题】：How to style :root without !important using proper specificity如何在没有 !important 的情况下使用适当的特异性设置 :root 样式
【发布时间】：2018-09-04 09:08:21
【问题描述】：

在自定义元素内，因为border-color 设置在父页面上，如果不诉诸!important，我无法使border-color 工作

  :host([player="O"]) {
      color: var(--color2);
      border-color: var(--color2) !important;
  }

选择器工作正常，颜色已设置，
所以这是一个特异性问题

问题：没有!important可以吗？

工作片段：

window.customElements.define('game-toes', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({
      mode: 'open'
    });
    shadowRoot.innerHTML = 'Toes';
    shadowRoot.appendChild(document.querySelector('#Styles').content.cloneNode(true));
  }
});

:root {
  --boardsize: 40vh;
  --color1: green;
  --color2: red;
}

game-toes {
  width: var(--boardsize);
  height: var(--boardsize);
  border: 10px solid grey;
  background: lightgrey;
  display: inline-block;
}

<TEMPLATE id="Styles">
  <STYLE>
      :host {
          display: inline-block;
          font-size:2em;
      }

      :host([player="X"]) {
         color: var(--color1);
         border-color: var(--color1);
      }

      :host([player="O"]) {
        color: var(--color2);
        border-color: var(--color2) !important;
      }
  </STYLE>
</TEMPLATE>
<game-toes player="X"></game-toes>
<game-toes player="O"></game-toes>

qomponents

【问题讨论】：

标签： css web-component custom-element css-specificity

【解决方案1】：

您正在使用 CSS 变量，因此您仍然可以像这样依赖它们：

window.customElements.define('game-toes', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({
      mode: 'open'
    });
    shadowRoot.innerHTML = 'Toes';
    shadowRoot.appendChild(document.querySelector('#Styles').content.cloneNode(true));
  }
});

:root {
  --boardsize: 40vh;
  --color1: green;
  --color2: red;
}

game-toes {
  width: var(--boardsize);
  height: var(--boardsize);
  border: 10px solid var(--playercolor,grey);
  color:var(--playercolor,#000);
  background: lightgrey;
  display: inline-block;
}

<TEMPLATE id="Styles">
  <STYLE>
      :host {
          display: inline-block;
          font-size:2em;
      }

      :host([player="X"]) {
          --playercolor: var(--color1);
      }

      :host([player="O"]) {
          --playercolor: var(--color2);
      }
  </STYLE>
</TEMPLATE>
<game-toes player="X"></game-toes>
<game-toes player="O"></game-toes>
<game-toes ></game-toes>

【讨论】：

酷，谢谢！...我只为这个小 sn-p 做了 CSS 变量，在我的原始代码中，我（当然）在硬编码的颜色值上苦苦挣扎。
作为参考，你能不能把--c改成--playercolor，你的答案比Bidelman或者MDN清楚多了

【解决方案2】：

作为对@Temani 优秀答案的补充：它发生是因为<games-toes> 的元素CSS 样式将取代影子根:host 样式。

根据Google's presentation：

外部样式总是胜过 shadow DOM 中定义的样式。例如，如果用户编写选择器 fancy-tabs { width: 500px; }，它将胜过组件的规则：:host { width: 650px;}

【讨论】：

或者用程序员的话；父级总是具有更高的 Specificity