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

Question

[run the code snippet]

I want my DIV number display to start at 0 ,
so I want to start the counter at -1 using: counter-reset : square -1;

Answer 1

:host is a pseudo-class that selects the shadow host element (that is: the HTML element that hosts the Shadow DOM), not the shadow root.

As a consequence, a counter-reset will affect the counter in the main DOM tree, not the counter in the Shadow DOM (see the example below).

If you want to set a CSS counter in the Shadow DOM root, you could use the :first-of-type selector:

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

squarenr=
squarenr=