Open Bug 1605640 Opened 4 years ago Updated 1 year ago

ordered list default style wrong when use web component

Categories

(Core :: Layout: Generated Content, Lists, and Counters, defect, P3)

Product:
Core
Component:
Layout: Generated Content, Lists, and Counters
Version:
71 Branch
Type:
defect

Tracking

()

People

(Reporter: litbear, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Test-case from reporter.
1.08 KB, text/html
Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

almost same html structure, it works well in pure html way.For simplicity I use emmet snippet

artical>ol>li*5>details>summary>span{summary_$}^ol>li*5>{li_$}

When I use web component, and code as follow, the <li> tag lost it's order。

<body>
    <template id="tree-item-template">
        <details>
            <summary>
                <slot name="title"></slot>
            </summary>
            <ol>
                <li>li_1</li>
                <li>li_2</li>
                <li>li_3</li>
                <li>li_4</li>
                <li>li_5</li>
            </ol>
        </details>
    </template>
    <article></article>
    <script>
        class TreeItem extends HTMLElement {
            constructor() {
                super()
                let template = document.querySelector('#tree-item-template')
                let templateContext = template.content
                const shadowRoot = this.attachShadow({ mode: 'open' })
                shadowRoot.appendChild(templateContext.cloneNode(true))
            }
        }

        customElements.define('tree-item', TreeItem)
        document.querySelector('article').innerHTML = `<ol>${[...Array(5).keys()].map((item, index) => `<li><tree-item><span slot="title">summary_${index}<span></tree-item></li>`).join('')}</ol>`
    </script>
</body>

Actual results:

the <li> tag lost it's order when I use web component.(but it's works well in Chrome 74)

Expected results:

it should consistent with the behavior of pure html code

Blocks: shadowdom
Component: Untriaged → DOM: Core & HTML
Product: Firefox → Core
Status: UNCONFIRMED → NEW
Component: DOM: Core & HTML → Layout: Generated Content, Lists, and Counters
Ever confirmed: true

The priority flag is not set for this bug.
:boris, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(boris.chiou)
Flags: needinfo?(boris.chiou)
Priority: -- → P3

Next steps are to check what Blink and WebKit do with regular CSS counters, and see how it differs if in any way from us.

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.