Bug 183931 – connectedCallback is invoked by the HTML parser after child nodes had been inserted

• Status: RESOLVED
• Resolution: FIXED
• Component: UI Events

[Andrea Giammarchi]

Accordingly with this Chromium bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=821831

It looks like Webkit/Safari have a bug related to Custom Elements and their connectedCallback invoke,
always triggered *after* DOMContentLoaded, even if the definition of the element is known,
and the page is also already served.

Accordingly, using this test page as reference:
https://webreflection.github.io/eyeo/tests/ce.html

The correct result should most likely the following one:
```
constructor: 0
attributeChangedCallback: 0
a
b
c
connectedCallback: 3
ready: 3
```

In Webkit/Safari the result is instead this one:
```
constructor: 0
a
b
c
ready: 3
attributeChangedCallback: 3
connectedCallback: 3
```

[Radar WebKit Bug Importer]

<rdar://problem/38843548>

[Kent Tamura]

We're adding test cases for this issue to WPT.
https://github.com/w3c/web-platform-tests/pull/10251

[Ryosuke Niwa]

We pass almost all test cases once the patch for the bug 188189 is landed but there's one test case in custom-elements/parser/parser-sets-attributes-and-children.html we fail:
HTML parser should call connectedCallback before appending child nodes

[Ryosuke Niwa]

Created attachment 347149 [details]
Fixes the bug

[Alex Christensen]

Comment on attachment 347149 [details]
Fixes the bug

View in context: https://bugs.webkit.org/attachment.cgi?id=347149&action=review

> Source/WebCore/ChangeLog:19
> +        (WebCore::HTMLConstructionSite::insertCustomElement): Fixed the bug by manually executign the scheduled tasks.

executing

[Ryosuke Niwa]

Committed r234893: <https://trac.webkit.org/changeset/234893>

[Frédéric Wang (:fredw)]

Comment on attachment 347149 [details]
Fixes the bug

View in context: https://bugs.webkit.org/attachment.cgi?id=347149&action=review

> Source/WebCore/ChangeLog:9
> +        Invoke the custom element reactions after constructing and inserting a custom element as specifed in step 3.3 of:

nit: specified