在中使用CSS计数器重置:自定义元素的主机声明
在中使用CSS计数器重置:自定义元素的主机声明
提问于 2018-09-29 16:59:57
运行代码片段
我希望我的DIV号显示从开始
所以我想使用-1 \f25 counter-reset : square -1; -1\f6启动计数器
但是，在:host中使用时会忽略此设置
当所有的DIV都被包装在一个额外的parentDIV中时，counter-reset工作得很好(在父parentDIV上有counter-reset )
但我更喜欢而不是来使用这种变通方法，因为它在我的最终应用程序中需要更多的代码。
是否可以在counter-reset :host 中使用？
window.customElements.define('game-toes', class extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'})
.appendChild(document.querySelector('#Styles').content.cloneNode(true));
}
});<TEMPLATE id="Styles">
<STYLE>
:host {
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: .5em;
counter-reset: squarenr -1; /* does not reset to -1 */
}
DIV {
font-size:3em;
display:flex;
justify-content:center;
background:lightgrey;
counter-increment: squarenr;
}
#_::before {
background:lightgreen;
content: counter(squarenr);
}
#X::after,
#O::after {
content: attr(id);
}
</STYLE>
<DIV id=_></DIV><DIV id=_></DIV><DIV id=X></DIV>
<DIV id=_></DIV><DIV id=X></DIV><DIV id=_></DIV>
<DIV id=O></DIV><DIV id=O></DIV><DIV id=X></DIV>
</TEMPLATE>
<game-toes></game-toes>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-30 05:32:53
:host是一个伪类，它选择影子主机元素(即:托管影子DOM的HTML元素)，而不是影子根。
因此，counter-reset将影响主DOM树中的计数器，而不是阴影DOM中的计数器(参见下面的示例)。
如果你想在Shadow DOM根目录中设置一个CSS计数器，你可以使用:first-of-type选择器：
div:first-of-type {
counter-reset: squarenr -1
}
window.customElements.define('game-toes', class extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'closed'})
.appendChild(document.querySelector('#Styles').content.cloneNode(true));
}
});div::after {
counter-increment: squarenr ;
content: counter( squarenr ) ;
}<TEMPLATE id="Styles">
<STYLE>
:host {
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: .5em;
counter-reset: squarenr -1;
}
:host > div:first-of-type {
counter-reset: squarenr -1;
color: red;
}
DIV {
font-size:2em;
display:flex;
justify-content:center;
background:lightgrey;
counter-increment: squarenr ;
}
#_::before {
background:lightgreen;
content: counter(squarenr);
}
#X::after,
#O::after {
content: attr(id);
}
</STYLE>
<DIV id=_></DIV><DIV id=_></DIV><DIV id=X></DIV>
<DIV id=_></DIV><DIV id=X></DIV><DIV id=_></DIV>
<DIV id=O></DIV><DIV id=O></DIV><DIV id=X></DIV>
</TEMPLATE>
<div>squarenr=</div><game-toes></game-toes><div>squarenr=</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52566791
复制相关文章
相似问题
腾讯云开发者
