Использование CSS counter-reset в: объявлении хоста пользовательского элемента - PullRequest
Новая
       33

Использование CSS counter-reset в: объявлении хоста пользовательского элемента

0 голосов
/ 29 сентября 2018

[запустить фрагмент кода]

Я хочу, чтобы отображение моего номера 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>

компоненты

1 Ответ

0 голосов
/ 30 сентября 2018

:host - это псевдокласс, который выбирает теневой хост-элемент (т. Е. HTML-элемент, в котором находится Shadow DOM), а не теневой корень.

Как следствие, counter-reset повлияет на счетчик в основном дереве DOM, а не на счетчик в Shadow DOM (см. Пример ниже).

Если вы хотите установитьСчетчик CSS в корне Shadow DOM, вы можете использовать селектор :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>
...