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

Question

[运行代码片段]

我希望我的 DIV 号码显示从 0 开始，
所以我想在 -1 开始使用：counter-reset : square -1;

然而，此设置在 :host

中使用时会被忽略

counter-reset 当所有 DIV 都包裹在一个额外的父 DIV 中时工作正常（counter-reset 在父 DIV 上）
但我更喜欢 而不是 使用此 解决方法 ，因为它在我的最终应用程序中需要更多代码。

是否可以在 :host 中使用 counter-reset ???

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>

qomponents

Answer 1

:host是伪class选择shadow宿主元素（即：承载ShadowDOM的HTML元素），不是shadow根。

因此，counter-reset 将影响主 DOM 树中的计数器，而不是阴影 DOM 中的计数器（参见下面的示例）。

如果你想在 Shadow DOM 根中设置一个 CSS 计数器，你可以使用 :first-of-type 选择器：

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

window.customElements.define('game-toes', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'closed'})
     .appendChild(document.querySelector('#Styles').content.cloneNode(true));
  }
});

div::after {
  counter-increment: squarenr ;
  content: counter( squarenr ) ;
}

<TEMPLATE id="Styles">
  <STYLE>
      :host {
        display: grid;
        grid-template: repeat(3, 1fr) / repeat(3, 1fr);
        grid-gap: .5em;
        counter-reset: squarenr -1; 
      }
      :host > div:first-of-type {
        counter-reset: squarenr -1; 
        color: red;
      }
      DIV {
        font-size:2em;
        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>
<div>squarenr=</div><game-toes></game-toes><div>squarenr=</div>

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

Using CSS counter-reset in :host declaration of a Custom Element

css

custom-element

css-counter