JS 中定义的自定义 HTML 元素不继承父元素样式

问题描述

我正在尝试创建两个新的自定义 HTML 元素 step-list 和 step-item，它们的工作方式类似于 ol 和 li -以 0 开头的数字。

我正在尝试使用 CSS counter-reset 和 counter-increment 以及 customElements.define()

我遇到的问题是，即使我将 counter-reset: steps 0 添加到 step-list 元素并将 counter-increment: steps 添加到 step-list 项目，每一个都呈现为 {{ 1}}，而不是 01、01、02 等

注意：我还想提前澄清一下，这个问题不是这个问题的重复（Do custom HTML elements inherit parent CSS styles?），因为这个问题是关于继承元素的样式新的自定义元素扩展。

这是我目前所拥有的：

03

class StepList extends HTMLElement {
    constructor() {
        super();
        const style = document.createElement('style');
        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.appendChild(style);
        // shadowRoot.innerHTML += this.innerHTML;
        Array.from(this.children).forEach(child => shadowRoot.appendChild(child.cloneNode(true)));
        style.textContent = `:host(step-list) { counter-reset: steps ${Number(this.getAttribute('start')) || 0}; --step: ${this.hasAttribute('step') && !isNaN(this.getAttribute('step')) ? Number(this.getAttribute('step')) : 1}; }`;
    }
}
customElements.define('step-list',StepList);
class StepItem extends HTMLElement {
    constructor() {
        super();
        const style = document.createElement('style');
        const content = document.createElement('div');
        content.innerHTML = this.innerHTML;
        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.appendChild(style);
        shadowRoot.appendChild(content);
        style.textContent = `
            :host::before { counter-increment: steps 1; content: "0" counter(steps); }
            :host:nth-child(n+10)::before { counter-increment: steps var(--step,1); content: counter(steps); }
        `;
    }
}
customElements.define('step-item',StepItem);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）