css 计数器和自定义组件（没有 shadow dom）答案

【问题标题】：css counters and custom components (without shadow dom)css 计数器和自定义组件（没有 shadow dom）
【发布时间】：2019-01-01 16:34:41
【问题描述】：

我在 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 计数器是否与自定义组件不兼容？

约翰。

【问题讨论】：

为什么说“没有影子dom”？
正如this fiddle. 所见，它似乎工作得很好另外，如果自定义组件意味着制作你自己的标签，你绝对不应该这样做。
它是一个自定义元素，就像您使用聚合物或普通 js 创建的元素一样

标签： html css custom-component

【解决方案1】：

您可以保持 HTML 不变，但尝试使用 :before 或 :after 让您的 CSS 看起来有点像这样。

body {
  counter-reset: countH1;
}

h1 {
counter-increment: countMe;
}

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

【讨论】：

问题是计数器没有增加..不是内容没有显示..
@JohnGorter 你试过 CSS 了吗？这将使计数器增加并显示给您。
它实际上与节点的位置有关。在我的场景中，我有三个级别的 Hx 标签（h1、h2、h3）。当 h2 标记位于另一个级别的 div 内时，文档中更远的 h3 将呈现为 1.0.1 而不是正确的 1.1.1。当我将 h2 标签放在更高的级别（在它所在的 div 之外）时，就会出现正确的结果。很高兴看到它与自定义元素无关。