{"action":"created","issue":{"url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/35","labels_url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/35/labels{/name}","comments_url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/35/comments","events_url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/35/events","html_url":"https://github.com/cyclejs/cycle-dom/issues/35","id":101759724,"number":35,"title":"Nested custom elements","user":{"login":"Frikki","id":180569,"avatar_url":"https://avatars.githubusercontent.com/u/180569?v=3","gravatar_id":"","url":"https://api.github.com/users/Frikki","html_url":"https://github.com/Frikki","followers_url":"https://api.github.com/users/Frikki/followers","following_url":"https://api.github.com/users/Frikki/following{/other_user}","gists_url":"https://api.github.com/users/Frikki/gists{/gist_id}","starred_url":"https://api.github.com/users/Frikki/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Frikki/subscriptions","organizations_url":"https://api.github.com/users/Frikki/orgs","repos_url":"https://api.github.com/users/Frikki/repos","events_url":"https://api.github.com/users/Frikki/events{/privacy}","received_events_url":"https://api.github.com/users/Frikki/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/cyclejs/cycle-dom/labels/discussion","name":"discussion","color":"fef2c0"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-08-18T22:05:43Z","updated_at":"2015-08-19T10:00:58Z","closed_at":null,"body":"Consider these two custom elements.\r\n\r\n_custom-element-1_\r\n```javascript\r\nfunction view(state$) {\r\n  return state$.map(state => {\r\n    const {isFocused, children} = state.props;\r\n\r\n    return h(`div.custom-element-1`,\r\n      {className: isFocused ? `isFocused` : ``},\r\n      children\r\n    );\r\n  });\r\n}\r\n```\r\n\r\n_custom-element-2_\r\n```javascript\r\nfunction view(state$) {\r\n  return state$.map(state => {\r\n    const {value} = state;\r\n    const {isFocused} = state.props;\r\n\r\n    return h(`div.custom-element-2`,\r\n      [\r\n        h(`custom-element-1`, {isFocused}, [\r\n          h(`input.my-input`, {value}),\r\n        ],\r\n      ]\r\n    );\r\n  });\r\n}\r\n```\r\n\r\n_custom-element-2_ uses _custom-element-1_, passing it `isFocused` property and an `INPUT` element as child. _custom-element-1_ uses the passed `isFocused` property to set a class name, and `children` property is used to render the children (the `INPUT` element).\r\n\r\nThe problem is that the `INPUT` element loses its value when `isFocused` changes, causing _custom-element-1_ to re-render. So my question is, how should I go about this?"},"comment":{"url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/comments/132522957","html_url":"https://github.com/cyclejs/cycle-dom/issues/35#issuecomment-132522957","issue_url":"https://api.github.com/repos/cyclejs/cycle-dom/issues/35","id":132522957,"user":{"login":"Frikki","id":180569,"avatar_url":"https://avatars.githubusercontent.com/u/180569?v=3","gravatar_id":"","url":"https://api.github.com/users/Frikki","html_url":"https://github.com/Frikki","followers_url":"https://api.github.com/users/Frikki/followers","following_url":"https://api.github.com/users/Frikki/following{/other_user}","gists_url":"https://api.github.com/users/Frikki/gists{/gist_id}","starred_url":"https://api.github.com/users/Frikki/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Frikki/subscriptions","organizations_url":"https://api.github.com/users/Frikki/orgs","repos_url":"https://api.github.com/users/Frikki/repos","events_url":"https://api.github.com/users/Frikki/events{/privacy}","received_events_url":"https://api.github.com/users/Frikki/received_events","type":"User","site_admin":false},"created_at":"2015-08-19T10:00:58Z","updated_at":"2015-08-19T10:00:58Z","body":"Found [this documentation](https://github.com/Matt-Esch/virtual-dom/blob/master/docs/hooks.md) on hooks for VNodes. I will look into it to see how it can solve my issue.\r\n\r\nThanks for the link to the gist! It is very valuable."}}