Bug 183583 - connectedCallback called when disconnected
Summary: connectedCallback called when disconnected
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: Safari 11
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2018-03-12 15:44 PDT by Justin Ridgewell
Modified: 2018-05-21 14:14 PDT (History)
11 users (show)

See Also:

test.html (1.74 KB, text/html)
2018-03-12 15:44 PDT, Justin Ridgewell
no flags Details
Patch (4.69 KB, patch)
2018-05-21 12:29 PDT, Rob Buis
rniwa: review-
ews-watchlist: commit-queue-
Details | Formatted Diff | Diff
Archive of layout-test-results from ews104 for mac-sierra-wk2 (2.94 MB, application/zip)
2018-05-21 13:17 PDT, EWS Watchlist
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Justin Ridgewell 2018-03-12 15:44:04 PDT
Created attachment 335654 [details]

Safari Version: 11.0.3 (13604.5.6)
Safari Tech Preview: Release 50 (Safari 11.2, WebKit 13606.1.5)
OS: Mac OS X 10.13.3

What steps will reproduce the problem?
(1) Go to https://output.jsbin.com/qumape/3/quiet
(2) Custom element 1 (Reparenter) defines a `connectedCallback` that will reparent all children nodes into a new div element (which it then appends to itself).
(3) Custom element 2 (Child) has any connectedCallback.
(4) Create a second Document tree, with the innerHTML `<x-parenter><x-child></x-child></x-parenter>`
(5) Import the second Document's body (deep: true), and append the result to the host body.

What is the expected result?
Child's connectedCallback should not fire when it is appended to the disconnected div. It should fire when the div is appended to the Reparenter (and the Reparenter is in the host DOM tree).

What happens instead?
Child's connectedCallback fires when it is appended to the disconneted div (making it disconnected from DOM tree).

(This is displayed by adding the h1 element to the DOM)
Comment 1 Radar WebKit Bug Importer 2018-03-12 18:38:40 PDT
Comment 2 Rob Buis 2018-05-21 12:29:38 PDT
Created attachment 340871 [details]
Comment 3 Chris Dumez 2018-05-21 12:49:03 PDT
I think Ryosuke should take a look.
Comment 4 Justin Ridgewell 2018-05-21 12:56:22 PDT
I forgot to link the Chrome bug I also filed: https://bugs.chromium.org/p/chromium/issues/detail?id=821195&desc=2

They closed as a won't fix, for this specific case (reparenter and child with disconnectedCallback, let's call this Case A). However, there's a [similar case](https://bugs.webkit.org/show_bug.cgi?id=183586) (reparenter and child _without_ disconnectedCallback) that shouldn't cause the bad behavior (let's call this Case B).

Chrome thinks Case A should fire when disconnected, and not fire in Case B.
Safari (currently) thinks both Cases should fire.
Firefox thinks neither Case should fire.

In all, it's very confusing to me why these Cases should be different. And given the browser disagreement, it's probably confusing to everyone else too.

Case A: https://output.jsbin.com/qumape/3/quiet
Case B: https://output.jsbin.com/qumape/7/quiet
Comment 5 Justin Ridgewell 2018-05-21 13:03:10 PDT
Scratch the Firefox, I forgot to enable webcomponents.

Firefox thinks Case A should fire, and Case B should not.
Comment 6 EWS Watchlist 2018-05-21 13:17:28 PDT
Comment on attachment 340871 [details]

Attachment 340871 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/7755558

New failing tests:
Comment 7 EWS Watchlist 2018-05-21 13:17:29 PDT
Created attachment 340875 [details]
Archive of layout-test-results from ews104 for mac-sierra-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews104  Port: mac-sierra-wk2  Platform: Mac OS X 10.12.6
Comment 8 Ryosuke Niwa 2018-05-21 13:33:47 PDT
Comment on attachment 340871 [details]

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

I don't think this change is correct. For that matter, I believe WebKit's current behavior is in accordance with the specification.

> Source/WebCore/dom/CustomElementReactionQueue.cpp:80
> -            elementInterface.invokeConnectedCallback(element);
> +            if (element.isConnected())
> +                elementInterface.invokeConnectedCallback(element);

There is no spec text which mandates a check like this:

> LayoutTests/fast/custom-elements/connected-callback.html:12
> +        while (this.firstChild) {

Why while?
Comment 9 Ryosuke Niwa 2018-05-21 13:35:38 PDT
As far as I've read the spec, WebKit's behavior is correct. Moving a node inside a connectedCallback or any other custom element reaction callback DOES not the already. enqueued custom element reactions.

If you feel this behavior is not what you want, please file a spec issue in https://github.com/w3c/webcomponents/issues
Comment 10 Justin Ridgewell 2018-05-21 13:55:20 PDT
Please take a look at the Case B issue, too: https://bugs.webkit.org/show_bug.cgi?id=183586
Comment 11 Ryosuke Niwa 2018-05-21 14:14:00 PDT
(In reply to Justin Ridgewell from comment #10)
> Please take a look at the Case B issue, too:
> https://bugs.webkit.org/show_bug.cgi?id=183586

https://webkit.org/b/183586 is a valid bug report.