在中使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52566791
复制相关文章
相似问题