{"action":"created","issue":{"url":"https://api.github.com/repos/WebReflection/document-register-element/issues/43","labels_url":"https://api.github.com/repos/WebReflection/document-register-element/issues/43/labels{/name}","comments_url":"https://api.github.com/repos/WebReflection/document-register-element/issues/43/comments","events_url":"https://api.github.com/repos/WebReflection/document-register-element/issues/43/events","html_url":"https://github.com/WebReflection/document-register-element/issues/43","id":119861969,"number":43,"title":"detachCallback not triggering during page load","user":{"login":"acelan86","id":1452771,"avatar_url":"https://avatars.githubusercontent.com/u/1452771?v=3","gravatar_id":"","url":"https://api.github.com/users/acelan86","html_url":"https://github.com/acelan86","followers_url":"https://api.github.com/users/acelan86/followers","following_url":"https://api.github.com/users/acelan86/following{/other_user}","gists_url":"https://api.github.com/users/acelan86/gists{/gist_id}","starred_url":"https://api.github.com/users/acelan86/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acelan86/subscriptions","organizations_url":"https://api.github.com/users/acelan86/orgs","repos_url":"https://api.github.com/users/acelan86/repos","events_url":"https://api.github.com/users/acelan86/events{/privacy}","received_events_url":"https://api.github.com/users/acelan86/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-12-02T03:53:14Z","updated_at":"2015-12-02T11:29:29Z","closed_at":null,"body":"```html\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>Modern DOM</title>\r\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui\">\r\n    <!--[if lte IE 9]><script>(function(f){window.setTimeout=f(window.setTimeout);window.setInterval=f(window.setInterval)})(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});</script><![endif]-->\r\n    <script src=\"//cdnjs.cloudflare.com/ajax/libs/dom4/1.5.2/dom4.max.js\"></script>\r\n    <!--[if IE 8]><script src=\"//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.9/ie8.max.js\"></script><![endif]-->\r\n    <!--[if IE 8]><script src=\"build/dre-ie8-upfront-fix.max.js\"></script><![endif]-->\r\n    <script src=\"build/document-register-element.max.js\"></script>\r\n    <!--[if IE 8]>\r\n      <script src=\"//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-shim.js\"></script>\r\n      <script src=\"//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.0/es5-sham.js\"></script>\r\n    <![endif]-->\r\n    <script>\r\n        document.createElement('x-a');\r\n    </script>\r\n    \r\n  </head>\r\n  <body>\r\n    <x-a id=\"abc\" style=\"background:red;height:100px;display:block;\"/>\r\n<script>\r\n        var MyElement = document.registerElement(\r\n          'x-a',\r\n          {\r\n            prototype: Object.create(\r\n              HTMLElement.prototype, {\r\n              createdCallback: {value: function() {\r\n                console.log('here I am ^_^ ');\r\n              }},\r\n              attachedCallback: {value: function() {\r\n                console.log('live on DOM ;-) ');\r\n              }},\r\n              detachedCallback: {value: function() {\r\n                console.log('leaving the DOM :-( )');\r\n              }},\r\n              attributeChangedCallback: {value: function(\r\n                name, previousValue, value\r\n              ) {\r\n                if (previousValue == null) {\r\n                  console.log(\r\n                    'got a new attribute ', name,\r\n                    ' with value ', value\r\n                  );\r\n                } else if (value == null) {\r\n                  console.log(\r\n                    'somebody removed ', name,\r\n                    ' its value was ', previousValue\r\n                  );\r\n                } else {\r\n                  console.log(\r\n                    name,\r\n                    ' changed from ', previousValue,\r\n                    ' to ', value\r\n                  );\r\n                }\r\n              }}\r\n            })\r\n          }\r\n        );\r\n    </script>\r\n    <script>\r\n    var el2 = document.querySelectorAll('x-a');\r\n    for (var i = 0, len = el2.length; i < len; i++) {\r\n        document.body.removeChild(el2[i]);\r\n    }\r\n    </script>\r\n  </body>\r\n</html>\r\n```\r\nif no\r\n```html\r\n <script>\r\n        document.createElement('x-a');\r\n    </script>\r\n```\r\nin \\<head\\>\r\n\r\ncan't trigger detachedCallback;\r\n"},"comment":{"url":"https://api.github.com/repos/WebReflection/document-register-element/issues/comments/161266691","html_url":"https://github.com/WebReflection/document-register-element/issues/43#issuecomment-161266691","issue_url":"https://api.github.com/repos/WebReflection/document-register-element/issues/43","id":161266691,"user":{"login":"acelan86","id":1452771,"avatar_url":"https://avatars.githubusercontent.com/u/1452771?v=3","gravatar_id":"","url":"https://api.github.com/users/acelan86","html_url":"https://github.com/acelan86","followers_url":"https://api.github.com/users/acelan86/followers","following_url":"https://api.github.com/users/acelan86/following{/other_user}","gists_url":"https://api.github.com/users/acelan86/gists{/gist_id}","starred_url":"https://api.github.com/users/acelan86/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acelan86/subscriptions","organizations_url":"https://api.github.com/users/acelan86/orgs","repos_url":"https://api.github.com/users/acelan86/repos","events_url":"https://api.github.com/users/acelan86/events{/privacy}","received_events_url":"https://api.github.com/users/acelan86/received_events","type":"User","site_admin":false},"created_at":"2015-12-02T11:29:29Z","updated_at":"2015-12-02T11:29:29Z","body":"thank u :)  , and say sorry for my poor english.\r\n\r\nand, i found in IE9,  the detachCallback will call twice?\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <title>Modern DOM</title>\r\n    <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui\">\r\n    <script src=\"build/document-register-element.max.js\"></script>\r\n  </head>\r\n  <body>\r\n    <x-a id=\"xx\" style=\"background:red;height:100px;display:block;\"/>\r\n    <x-a></x-a>\r\n    <script>\r\n        var MyElement = document.registerElement(\r\n          'x-a',\r\n          {\r\n            prototype: Object.create(\r\n              HTMLElement.prototype, {\r\n              detachedCallback: {value: function() {\r\n                console.log('leaving the DOM :-( )');\r\n              }}\r\n            })\r\n          }\r\n        );\r\n    </script>\r\n    <script>\r\n        var el = document.getElementById('xx');\r\n        document.body.removeChild(el);\r\n    </script>\r\n  </body>\r\n</html>\r\n```\r\n\r\nI found the code\r\n```javascript\r\nfunction executeAction(action) {\r\n  return function (node) {\r\n    if (isValidNode(node)) {\r\n      verifyAndSetupAndAction(node, action);\r\n      loopAndVerify(\r\n        node.querySelectorAll(query),\r\n        action\r\n      );\r\n    }\r\n  };\r\n}\r\n```\r\n`node.querySelectorAll(query)` has some problem  when removeChild，it will get all x-a element, no current node that be removed.\r\n\r\nand then \r\n```javascript\r\nfunction verifyAndSetupAndAction(node, action) {\r\n  var\r\n    fn,\r\n    i = getTypeIndex(node)\r\n  ;\r\n  if (-1 < i) {\r\n    patchIfNotAlready(node, protos[i]);\r\n    i = 0;\r\n    if (action === ATTACHED && !node[ATTACHED]) {\r\n      node[DETACHED] = false;\r\n      node[ATTACHED] = true;\r\n      i = 1;\r\n      if (IE8 && indexOf.call(targets, node) < 0) {\r\n        targets.push(node);\r\n      }\r\n    } else if (action === DETACHED && !node[DETACHED]) {\r\n      node[ATTACHED] = false;\r\n      node[DETACHED] = true;\r\n      i = 1;\r\n    }\r\n    if (i && (fn = node[action + 'Callback'])) fn.call(node);\r\n  }\r\n}\r\n```\r\nthe code `if (i && (fn = node[action + 'Callback'])) fn.call(node);` execute every time\r\n"}}