在自定义元素的主机声明中使用CSS计数器重置

[运行代码段]

我希望我的DIV number显示从0开始，
所以我想使用：

计数器重置：square-1在-1处启动计数器

但是，在
：host

计数器重置
在将所有div打包到一个额外的parentDIV中时工作正常
（在该父DIV上使用计数器重置
）

但是我更喜欢而不是使用这种变通方法，因为在我的最终应用程序中需要更多的代码

是否可以在
：主机中使用
计数器重置
？


window.customElements.define（'game-toes'，类扩展了HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:'open'}）
.appendChild（document.querySelector（“#Styles”）.content.cloneNode（true））；
}
});

：主持人{
显示：网格；
网格模板：重复（3，1fr）/重复（3，1fr）；
栅隙：.5em；
计数器重置：squarenr-1；/*未重置为-1*/
}
DIV{
字号：3em；
显示器：flex；
证明内容：中心；
背景：浅灰色；
反增量：平方；
}
#_：：之前{
背景：浅绿色；
内容：计数器（平方）；
}
#X：：之后，
#O:之后{
内容：attr（id）；
}
：host
是一个伪类，它选择影子主机元素（即：承载影子DOM的HTML元素），而不是影子根

因此，
计数器重置
将影响主DOM树中的计数器，而不是阴影DOM中的计数器（请参见下面的示例）

如果要在阴影DOM根目录中设置CSS计数器，可以使用类型
选择器的
：first：

 div:first-of-type {
    counter-reset: squarenr -1
 }


window.customElements.define（'game-toes'，类扩展了HtmleElement{
构造函数（）{
超级（）；
this.attachShadow（{mode:'closed'}）
.appendChild（document.querySelector（“#Styles”）.content.cloneNode（true））；
}
});
div:：after{
反增量：平方；
内容：计数器（平方）；
}

：主持人{
显示：网格；
网格模板：重复（3，1fr）/重复（3，1fr）；
栅隙：.5em；
计数器复位：squarenr-1；
}
：host>div:类型的第一个{
计数器复位：squarenr-1；
颜色：红色；
}
DIV{
字号：2em；
显示器：flex；
证明内容：中心；
背景：浅灰色；
反增量：平方；
}
#_：：之前{
背景：浅绿色；
内容：计数器（平方）；
}
#X：：之后，
#O:之后{
内容：attr（id）；
}
squarenr=squarenr=
我不太清楚它为什么不起作用。但是如果您可以将内容包装到另一个元素中，并在那里重置计数器，那么它就可以工作了。它可以在容器和第一个元素上重置它：是的，我说过“当包装在父DIV中时它可以工作”的事情是，我在自定义元素上有更多（观察到的）数据属性，也在CSS中引用。因此，“包装在另一个元素中”工作需要更多的代码来复制容器元素上的所有数据属性。因此，我的问题是：是否可以在：hostspot上一如既往地进行计数器重置工作。提出一个问题：我们可以在主机中设置一个计数器，有没有办法增加该计数器？（只是想知道，这个应用不需要它）@Danny'365CSI'Engelman如果我理解你的问题：是的，你可以在主CSS样式表中增加计数器：host（作为标准HTML元素）。请参阅编辑代码片段。我应该说：有没有办法从自定义计数器（在主机中）递增该计数器Element@Danny“365CSI”Engelman可能通过在light DOM中添加虚拟元素（将被阴影DOM隐藏），或者通过Javascript代码重置CSS计数器。。。