{"action":"created","issue":{"url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/1262","repository_url":"https://api.github.com/repos/OnsenUI/OnsenUI","labels_url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/1262/labels{/name}","comments_url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/1262/comments","events_url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/1262/events","html_url":"https://github.com/OnsenUI/OnsenUI/issues/1262","id":136338466,"number":1262,"title":"We should remove all DOM structure mutation on `createdCallback()` and `attachedCallback()`.","user":{"login":"anatoo","id":59784,"avatar_url":"https://avatars.githubusercontent.com/u/59784?v=3","gravatar_id":"","url":"https://api.github.com/users/anatoo","html_url":"https://github.com/anatoo","followers_url":"https://api.github.com/users/anatoo/followers","following_url":"https://api.github.com/users/anatoo/following{/other_user}","gists_url":"https://api.github.com/users/anatoo/gists{/gist_id}","starred_url":"https://api.github.com/users/anatoo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/anatoo/subscriptions","organizations_url":"https://api.github.com/users/anatoo/orgs","repos_url":"https://api.github.com/users/anatoo/repos","events_url":"https://api.github.com/users/anatoo/events{/privacy}","received_events_url":"https://api.github.com/users/anatoo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2016-02-25T10:05:14Z","updated_at":"2016-02-25T13:03:56Z","closed_at":null,"body":"Currently several core elements (e.g ons-page, ons-navigator, ons-switch) mutate DOM structure on the initialization.\r\n\r\n`ons-page` Example:\r\n\r\nHTML:\r\n```html\r\n<ons-page>\r\n  <ons-toolbar>\r\n     <div class=\"center\">Title</div>\r\n  </ons-toolbar>\r\n\r\n  <div>foobar</div>\r\n</ons-page>\r\n```\r\n\r\nDOM after initialization:\r\n```html\r\n<ons-page class=\"page\">\r\n  <ons-toolbar>\r\n     <div class=\"center\">Title</div>\r\n  </ons-toolbar>\r\n  <div class=\"page__content\">\r\n    <div>foobar</div>\r\n  </div>\r\n  <div class=\"page__background\"></div>\r\n</ons-page>\r\n```\r\n\r\nThis behavior  break Angular2 DOMRenderer and Virtual DOM based frameworks like React.\r\n\r\nWe should remove all DOM structure mutation(not style and attribute) on `createdCallback()` and `attachedCallback()`. For example, `ons-page` should be like the below to remove DOM structure mutation on initialization.\r\n\r\nHTML:\r\n```html\r\n<ons-page>\r\n  <ons-toolbar>\r\n    <div class=\"center\">Title</div>\r\n  </ons-toolbar>\r\n  <ons-page-content>\r\n    foobar\r\n  </ons-page-content>\r\n  <ons-page-background></ons-page-background>\r\n</ons-page>\r\n```\r\n\r\nAlternately, I think we can wait Shadow DOM implementation on mobile browsers and use Shadow DOM instead of removal DOM structure mutation on initialization.\r\n\r\n@OnsenUI/owners  @OnsenUI/members How do you think about this problem?"},"comment":{"url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/comments/188777965","html_url":"https://github.com/OnsenUI/OnsenUI/issues/1262#issuecomment-188777965","issue_url":"https://api.github.com/repos/OnsenUI/OnsenUI/issues/1262","id":188777965,"user":{"login":"anatoo","id":59784,"avatar_url":"https://avatars.githubusercontent.com/u/59784?v=3","gravatar_id":"","url":"https://api.github.com/users/anatoo","html_url":"https://github.com/anatoo","followers_url":"https://api.github.com/users/anatoo/followers","following_url":"https://api.github.com/users/anatoo/following{/other_user}","gists_url":"https://api.github.com/users/anatoo/gists{/gist_id}","starred_url":"https://api.github.com/users/anatoo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/anatoo/subscriptions","organizations_url":"https://api.github.com/users/anatoo/orgs","repos_url":"https://api.github.com/users/anatoo/repos","events_url":"https://api.github.com/users/anatoo/events{/privacy}","received_events_url":"https://api.github.com/users/anatoo/received_events","type":"User","site_admin":false},"created_at":"2016-02-25T13:03:56Z","updated_at":"2016-02-25T13:03:56Z","body":"あと名前がちょっと良くない気がします。\r\n'_compiled' is not good name in this use case."}}