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;

Yet, this setting is ignored when used in :host

counter-reset works fine when all DIVs are wrapped in an extra parentDIV (with counter-reset on that parent DIV)
But I prefer not to use this work-around as it requires lots more code in my final application.

Is it possible at all to use counter-reset in :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>

qomponents

I'm not so sure why it does not work. But if you can wrap your content in another element, and have the counter reset there, then it works. It works on both resetting it on the container and the first element: http://jsfiddle.net/szmfj5kw/2/ — Frank Fajardo, Sep 29 '18 at 10:23
Yes, I stated *'when wrapped in a parent DIV it works'* Thing is, I have more (observed) data-attributes on my Custom Element, also referenced in CSS. So the 'wrap-in-another-element' *work-around* then requires lots more code to **duplicate** all those data-attributes on the container element. Therefor my question: Can counter-reset work in :host — Danny '365CSI' Engelman, Sep 29 '18 at 10:52

Supersharp · Accepted Answer · 2018-10-01T11:28:19.980

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

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

spot on as ever. Raises the question: We can set a counter **in** the host, is there a way to increment that counter? (just wondering, don't need it for this app) — Danny '365CSI' Engelman, Oct 01 '18 at 08:38
@Danny'365CSI'Engelman If I understand your question: yes you can increment the counter in :host inside main CSS stylesheet (as standard HTML element). See the edit code snippet. — Supersharp, Oct 01 '18 at 11:27
I should have said: is there a way to increment that counter (in the host) FROM the Custom Element — Danny '365CSI' Engelman, Oct 02 '18 at 14:26
@Danny'365CSI'Engelman maybe by adding dummy elements in the light DOM (which will be hidden by the Shadow DOM), or by resetting the CSS counter via Javascript code... — Supersharp, Oct 02 '18 at 15:21

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

1 Answers1

Linked

Related