html - css 计数器和自定义组件(没有 shadow dom)

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;
}