在自定义元素内,因为
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>
您正在使用 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>
作为@Temani优秀答案的补充:发生这种情况是因为
<games-toes>
的元素CSS样式将取代影子根:host
样式。
根据Google的演示:
外部样式总是胜过 Shadow DOM 中定义的样式。例如,如果用户编写选择器 fancy-tabs { width: 500px; },它将超越组件的规则: :host { width: 650px;}
您可以通过重复来增加
:root
的特异性,如下所示:
:root:root {} /* Note: there should be no space between */