在自定义元素的：host声明中使用CSS计数器重置 [英] Using CSS counter-reset in :host declaration of a Custom Element

问题描述

[运行代码段]

我希望我的DIV编号显示从 0 开始，

这样我想使用-1在计数器处开始： counter-reset：square -1;

但是，这个在：host

中使用的设置将被忽略

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

是否可以在：host ???

中使用计数器重置

  window.customElements.define（'game-toes'，类扩展HTMLElement {Constructor（） {super（）; this.at tachShadow（{mode：‘open’}）.appendChild（document.querySelector（‘＃Styles’）。content.cloneNode（true））; }}）;  

 < TEMPLATE id = Styles > < STYLE> ：host {display：grid;网格模板：repeat（3，1fr）/ repeat（3，1fr）;网格间隙：.5em;计数器重置：squarenr -1； / *不会重置为-1 * /} DIV {font-size：3em;显示：flex;证明内容：中心；背景：浅灰色；反增量：squarenr； } #_ ::之前{background：lightgreen;内容：counter（squarenr）; } #X :: after，#O :: after {content：attr（id）; }< / STYLE> < DIV id = _< / DIV>< DIV id = _> // DIV< DIV id = X< / DIV> < DIV id = _> / DIV id = X< / DIV< DIV id = _< / DIV> < DIV id = O< / DIV>< DIV id = O> / DIV< DIV id = X< / DIV< / TEMPLATE>< game-toes>< /游戏脚趾>  

---

质量子系统

解决方案

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

因此，计数器重置将影响主DOM树中的计数器，而不是主DOM树中的计数器Shadow DOM（请参见下面的示例）。

如果要在Shadow DOM根目录中设置CSS计数器，则可以使用：首选类型选择器：

  div：首选类型{
计数器重置：squarenr -1 
} 
  

  window.customElements.define（'game-toes'，类扩展HTMLElement {Constructor（）{super（）; this.attachShadow（{mode：'closed' }）.appendChild（document.querySelector（'＃Styles'）。content.cloneNode（true））;}}）;  

  div :: after {counter-increment：squarenr;内容：counter（squarenr）;}  

 < TEMPLATE ID =样式> < STYLE> ：host {display：grid;网格模板：repeat（3，1fr）/ repeat（3，1fr）;网格间隙：.5em;计数器重置：squarenr -1； }：主机> div：first-of-type {counter-reset：squarenr -1;红色; } DIV {font-size：2em;显示：flex;证明内容：中心；背景：浅灰色；反增量：squarenr; } #_ ::之前{background：lightgreen;内容：counter（squarenr）; } #X :: after，#O :: after {content：attr（id）; }< / STYLE> < DIV id = _< / DIV>< DIV id = _> // DIV< DIV id = X< / DIV> < DIV id = _> / 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>  

p>

[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

解决方案

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

这篇关于在自定义元素的：host声明中使用CSS计数器重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！