Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Ensure upgrading element fire attached in tree order
Browse files Browse the repository at this point in the history
If elements are inserted and upgrading at the same time, explicitly call the attachedCallback before recursing into
children

Fixes #96

Add test

Add ordering test for detachedCallback
  • Loading branch information
dfreedm committed Feb 8, 2014
1 parent be42be8 commit 191c02d
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 2 deletions.
3 changes: 2 additions & 1 deletion src/CustomElements.js
Original file line number Diff line number Diff line change
Expand Up @@ -226,8 +226,9 @@ if (useNative) {
element.__upgraded__ = true;
// lifecycle management
created(element);
// attachedCallback fires in tree order, call before recursing
scope.insertedNode(element);
// there should never be a shadow root on element at this point
// we require child nodes be upgraded before `created`
scope.upgradeSubtree(element);
// OUTPUT
return element;
Expand Down
2 changes: 1 addition & 1 deletion src/Observer.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@ function insertedNode(node) {
}
}


// TODO(sorvell): on platforms without MutationObserver, mutations may not be
// reliable and therefore attached/detached are not reliable.
// To make these callbacks less likely to fail, we defer all inserts and removes
Expand Down Expand Up @@ -335,6 +334,7 @@ scope.watchShadow = watchShadow;
scope.upgradeDocumentTree = upgradeDocumentTree;
scope.upgradeAll = addedNode;
scope.upgradeSubtree = addedSubtree;
scope.insertedNode = insertedNode;

scope.observeDocument = observeDocument;
scope.upgradeDocument = upgradeDocument;
Expand Down
44 changes: 44 additions & 0 deletions test/js/customElements.js
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,50 @@
assert.deepEqual(invocations, ['created', 'entered', 'left'],
'created, entered then left view');
});

test('attachedCallback ordering', function() {
var log = [];
var p = Object.create(HTMLElement.prototype);
p.attachedCallback = function() {
log.push(this.id);
};
document.registerElement('x-boo-ordering', {prototype: p});

work.innerHTML =
'<x-boo-ordering id=a>' +
'<x-boo-ordering id=b></x-boo-ordering>' +
'<x-boo-ordering id=c>' +
'<x-boo-ordering id=d></x-boo-ordering>' +
'<x-boo-ordering id=e></x-boo-ordering>' +
'</x-boo-ordering>' +
'</x-boo-ordering>';

CustomElements.takeRecords();
assert.deepEqual(['a', 'b', 'c', 'd', 'e'], log);
});

test('detachedCallback ordering', function() {
var log = [];
var p = Object.create(HTMLElement.prototype);
p.detachedCallback = function() {
log.push(this.id);
};
document.registerElement('x-boo2-ordering', {prototype: p});

work.innerHTML =
'<x-boo2-ordering id=a>' +
'<x-boo2-ordering id=b></x-boo2-ordering>' +
'<x-boo2-ordering id=c>' +
'<x-boo2-ordering id=d></x-boo2-ordering>' +
'<x-boo2-ordering id=e></x-boo2-ordering>' +
'</x-boo2-ordering>' +
'</x-boo2-ordering>';

CustomElements.takeRecords();
work.innerHTML = '';
CustomElements.takeRecords();
assert.deepEqual(['a', 'b', 'c', 'd', 'e'], log);
});
});

htmlSuite('customElements (html)', function() {
Expand Down

0 comments on commit 191c02d

Please sign in to comment.