首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在中使用CSS计数器重置:自定义元素的主机声明

在中使用CSS计数器重置:自定义元素的主机声明
EN

Stack Overflow用户
提问于 2018-09-29 16:59:57
回答 1查看 98关注 0票数 2

运行代码片段

我希望我的DIV号显示从开始

所以我想使用-1 \f25 counter-reset : square -1; -1\f6启动计数器

但是,在:host中使用时会忽略此设置

当所有的DIV都被包装在一个额外的parentDIV中时,counter-reset工作得很好(在父parentDIV上有counter-reset )

但我更喜欢而不是来使用这种变通方法,因为它在我的最终应用程序中需要更多的代码。

是否可以在counter-reset :host 中使用

代码语言:javascript
复制
window.customElements.define('game-toes', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'})
     .appendChild(document.querySelector('#Styles').content.cloneNode(true));
  }
});
代码语言:javascript
复制
<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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-30 05:32:53

:host是一个伪类,它选择影子主机元素(即:托管影子DOM的HTML元素),而不是影子根。

因此,counter-reset将影响主DOM树中的计数器,而不是阴影DOM中的计数器(参见下面的示例)。

如果你想在Shadow DOM根目录中设置一个CSS计数器,你可以使用:first-of-type选择器:

代码语言:javascript
复制
 div:first-of-type {
    counter-reset: squarenr -1
 }

代码语言:javascript
复制
window.customElements.define('game-toes', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'closed'})
     .appendChild(document.querySelector('#Styles').content.cloneNode(true));
  }
});
代码语言:javascript
复制
div::after {
  counter-increment: squarenr ;
  content: counter( squarenr ) ;
}
代码语言:javascript
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52566791

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档