Как стилизовать: root без! Важно использовать правильную специфику

Question

Внутри Пользовательского элемента , поскольку на родительской странице установлено значение border-color, я не могу заставить border-color работать без обращения к !important

  :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

Answer 1

В качестве дополнения к @Temani отличный ответ: это произошло потому, что стиль CSS элемента для <games-toes> заменит стиль теневого корня :host.

Согласно презентации Google :

Внешние стили всегда побеждают стили, определенные в теневом DOM. Например, если пользователь пишет селектор fancy-tabs {width: 500px; }, оно превзойдет правило компонента:: host {width: 650px;}

Answer 2

Вы используете переменную 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>