2

[运行代码片段]

我希望我的 DIV 数字显示从0开始，
所以我想使用以下命令在 -1 开始计数器：counter-reset : square -1;

然而，这个设置在使用时会被忽略:host

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

有没有可能在中counter-reset使用:host？？？

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>

组件

4

1 回答 1

1

:host是一个伪类，它选择影子宿主元素（即：承载 Shadow DOM 的 HTML 元素），而不是影子根。

因此， acounter-reset将影响主 DOM 树中的计数器，而不是 Shadow 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>

于 2018-09-29T21:32:52.513 回答