188284 2018-08-02 16:32:38 -0700 Custom elements created by the parser in a connected position have their constructors and connectedCallbacks called out of order 2018-08-14 15:36:34 -0700 1 1 1 Unclassified WebKit DOM Safari 11 Unspecified Unspecified RESOLVED DUPLICATE 188189 https://bugs.webkit.org/show_bug.cgi?id=188327 InRadar P2 Normal --- 1 bicknellr webkit-unassigned annevk bicknellr cdumez fred.wang rniwa webkit-bug-importer oldest_to_newest 1447431 0 346427 bicknellr 2018-08-02 16:32:38 -0700 Created attachment 346427 A page with custom elements that log when their constructor and connectedCallback are called. When a group of custom elements are created through the parser (either because they are in the main document's HTML or are in a string being set to a connected element's `innerHTML` property), they are all constructed before any have their `connectedCallback` called. For example, for this tree: <c-e id="A"> <c-e id="B"></c-e> </c-e> <c-e id="C"></c-e> Safari calls the constructor and connectedCallback of each in this order: - constructor A - constructor B - constructor C - connectedCallback A - connectedCallback B - connectedCallback C However, the order should be this: - constructor A - connectedCallback A - constructor B - connectedCallback B - constructor C - connectedCallback C Relevant spec text: https://html.spec.whatwg.org/multipage/parsing.html#create-an-element-for-the-token The 'in-document HTML' case would have 'will execute script' set to true, meaning that the interleaved order above is the expected order, AFAICT. I think Safari's `innerHTML` is correct here though: it would have 'will execute script' set to false, so the connectedCallback reactions would all be delayed until they're popped at the end. 1447462 1 bicknellr 2018-08-02 17:22:26 -0700 Chrome and Firefox seem to have the opposite problem; their `innerHTML` setters act as if the elements being created were in the main document: https://bugs.chromium.org/p/chromium/issues/detail?id=870512 https://bugzilla.mozilla.org/show_bug.cgi?id=1480632 1447979 2 rniwa 2018-08-04 22:06:14 -0700 Do we have any WPT tests that cover these cases? 1447983 3 fred.wang 2018-08-05 00:44:47 -0700 For the synchronous case ('in-document HTML'), the patch on bug 188190 is supposed to force execution of the connectedCallBack immediately after insertion of the element (There is WPT test to ensure the element is indeed empty when connectedCallBack is called). That might improve things, but I don't know beforehand what we do regarding the order of constructor call / element insertion, especially since HTMLConstructionSite uses an m_taskQueue to delay insertion. 1448252 4 bicknellr 2018-08-06 14:53:45 -0700 (BTW, the other two bugs I mentioned are now closed: my interpretation of the spec was wrong.) 1448300 5 webkit-bug-importer 2018-08-06 17:01:22 -0700 <rdar://problem/42987289> 1448377 6 fred.wang 2018-08-07 00:56:30 -0700 (In reply to Russell Bicknell from comment #4) > (BTW, the other two bugs I mentioned are now closed: my interpretation of > the spec was wrong.) Thanks for the update. For the non-synchronous case (innerHTML) note that bug 188327 was recently fixed. 1450121 7 rniwa 2018-08-14 15:36:28 -0700 Okay, this is caused by the bug 188189 so I'll fix it there. *** This bug has been marked as a duplicate of bug 188189 *** 346427 2018-08-02 16:32:38 -0700 2018-08-02 16:32:38 -0700 A page with custom elements that log when their constructor and connectedCallback are called. safariCEParserCreatedOrder.html text/html 754 bicknellr PCFkb2N0eXBlIGh0bWw+Cgo8c2NyaXB0PgpsZXQgb3JkZXIgPSAwOwpjbGFzcyBDRSBleHRlbmRz IEhUTUxFbGVtZW50IHsKICBjb25zdHJ1Y3RvcigpIHsKICAgIHN1cGVyKCk7CiAgICB0aGlzLmF0 dGFjaFNoYWRvdyh7bW9kZTogJ29wZW4nfSkuaW5uZXJIVE1MID0gYAogICAgICBbPHNwYW4gaWQ9 ImxvZyI+PC9zcGFuPl0gPHNsb3Q+PC9zbG90PgogICAgYDsKICAgIHRoaXMuX2xvZyhgY29uc3Ry dWN0b3IgJHtvcmRlcisrfWApOwogIH0KCiAgY29ubmVjdGVkQ2FsbGJhY2soKSB7CiAgICB0aGlz Ll9sb2coYCwgY29ubmVjdGVkQ2FsbGJhY2sgJHtvcmRlcisrfWApOwogIH0KCiAgX2xvZyh0ZXh0 KSB7CiAgICB0aGlzLnNoYWRvd1Jvb3QucXVlcnlTZWxlY3RvcignI2xvZycpLmFwcGVuZENoaWxk KG5ldyBUZXh0KHRleHQpKTsKICB9Cn0KY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdjLWUnLCBDRSk7 Cjwvc2NyaXB0PgoKPGMtZT4KICA8Yy1lPgogICAgPGMtZT48L2MtZT4KICAgIDxjLWU+PC9jLWU+ CiAgPC9jLWU+CiAgPGMtZT4KICAgIDxjLWU+PC9jLWU+CiAgICA8Yy1lPjwvYy1lPgogIDwvYy1l Pgo8L2MtZT4KPGMtZT4KICA8Yy1lPjwvYy1lPgogIDxjLWU+PC9jLWU+CjwvYy1lPgoKPHN0eWxl PgpjLWUgewogIGRpc3BsYXk6IGJsb2NrOwogIG1hcmdpbjogMnB4OwogIGJvcmRlcjogMXB4IHNv bGlkIGdyYXk7CiAgcGFkZGluZzogMnB4Owp9CgpjLWUgYy1lIHsKICBtYXJnaW4tbGVmdDogMmNo Owp9Cjwvc3R5bGU+Cg==