Question

我正在使用CSS中的自定义计数器进行打印。这是可行的，但是，当h1标签位于自定义组件中时，计数器似乎会重置。这是一个错误吗？

示例： css：

h1 {
counter-increment: countH1;
}

html：

<h1>hello</h1>     -> counter is 1
<h1>hello</h1>     -> counter is 2
<my-component>
  <h1>hello again</h1> -> counter is 1 again :-(
</my-component>

请注意，my-component是自定义元素。这是一个customElements.define（'my-component'，myComponent）; JS中实现。

css计数器是否与自定义组件不兼容？

约翰。

Answer 1

您可以保留HTML，但尝试使用：before或：after ，使CSS看起来像这样。

body {
  counter-reset: countH1;
}

h1 {
counter-increment: countMe;
}

h1:before {
  content: counter(countMe, upper-roman);
  padding-right: 20px;
}

CSS计数器和自定义组件（无Shadow dom）

1 个答案: