1666972 - Child custom-element connected callback executed before constructor

Status: NEW

(Core :: DOM: Core & HTML, defect)

Description

[christian]

Attachment: ff test.zip

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

Steps to reproduce:

If you create a parent custom element and a child derived from it and in the parent constructor you append that element to another container the child connected callback is called before the child constructor is executed.
Simple example attached.

Actual results:

You get errors on any access to the child custom element properties because they're not being created yet.

Expected results:

Before firing the connected callback the child constructor must be executed, that is what happens in all other browsers.

Comment 1

[Kagami Rosylight [:saschanaz] (they/them)]

John, I think you did some custom elements work. Mind taking a look?

Comment 2

[John Dai[:jdai]]

Sure, I will take a look. Keep NI for tracking.

Comment 3

[Edgar Chen [:edgar]]

Attachment: test.htm

Comment 4

[Edgar Chen [:edgar]]

I suspect we run the reactions in a different order than Chrome. John, could you check what does the spec say about this case, i.e. what is the result of running the spec steps. Thanks.

Comment 5

[John Dai[:jdai]]

Per comment 3, I can reproduce this bug by upgrading elements after their creation.

Here is Firefox output:
parent connected true
parent constructor
child connected true undefined
parent constructor
child constructor

Here are Chromium and Safari output:
parent constructor
parent connected true
parent constructor
child constructor
child connected true true

Comment 6

[Edgar Chen [:edgar]]

To be more specific, the test script enqueue a connected callback reaction during running the constructor (from the appendChild call), and we seem to execute the callback reaction in appendChild's CEReaction, but Chrome runs the callback reaction after construct one, I think Chrome's behavior makes more sense, given it doesn't mix the reaction execution order, but I wonder what spec says about this case, i.e. does spec define something to prevent this kind of recursion case?

Comment 7

[Edgar Chen [:edgar]]

Attachment: test2.htm

Simpler test case.

Comment 8

[Edgar Chen [:edgar]]

The tricky part is the upgrade and connected callback reaction are enqueued into the same element queue. And the same element queue would be pushed and popped to stack multiple times, we need to check the spec algorithm to see how do the reactions be executed.

Comment 9

[Edgar Chen [:edgar]]

I checked the spec, spec seems not to define something to defer the reactions executed,

• https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions
• https://html.spec.whatwg.org/multipage/custom-elements.html#invoke-custom-element-reactions

so the next thing we need to check is whether we push the reaction to the element's reaction queue in the order defined in the spec.

Comment 10

[Hsin-Yi Tsai (she/her) [:hsinyi]]

May need more spec clarity.