如何设置样式：使用适当的特殊性，无需使用！root

Question

在自定义元素内，因为在父页面上设置了Traceback (most recent call last): File "my_python_file.py", line 305, in <module> window_before = driver.window_handles[0] File "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 723, in window_handles return self.execute(Command.W3C_GET_WINDOW_HANDLES)['value'] File "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 318, in execute response = self.command_executor.execute(driver_command, params) File "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/remote_connection.py", line 472, in execute return self._request(command_info[0], url, body=data) File "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/remote_connection.py", line 496, in _request resp = self._conn.getresponse() File "/usr/lib/python2.7/httplib.py", line 1136, in getresponse response.begin() File "/usr/lib/python2.7/httplib.py", line 453, in begin version, status, reason = self._read_status() File "/usr/lib/python2.7/httplib.py", line 417, in _read_status raise BadStatusLine(line) httplib.BadStatusLine: '' ，所以如果不借助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;
}

---

qomponents

Answer 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>

Answer 2

作为@Temani出色答案的补充：之所以发生，是因为<games-toes>的CSS元素样式将取代阴影根:host样式。

根据Google's presentation：

  

外部样式始终胜过影子DOM中定义的样式。例如，如果用户编写了选择器fancy-tabs {width：500px; }，它将胜过组件的规则：：hos​​t {width：650px;}