{"action":"created","issue":{"url":"https://api.github.com/repos/tbranyen/diffhtml/issues/47","repository_url":"https://api.github.com/repos/tbranyen/diffhtml","labels_url":"https://api.github.com/repos/tbranyen/diffhtml/issues/47/labels{/name}","comments_url":"https://api.github.com/repos/tbranyen/diffhtml/issues/47/comments","events_url":"https://api.github.com/repos/tbranyen/diffhtml/issues/47/events","html_url":"https://github.com/tbranyen/diffhtml/issues/47","id":132759688,"number":47,"title":"[Question] Hook to allow for Custom Element rendering","user":{"login":"tbranyen","id":181635,"avatar_url":"https://avatars.githubusercontent.com/u/181635?v=3","gravatar_id":"","url":"https://api.github.com/users/tbranyen","html_url":"https://github.com/tbranyen","followers_url":"https://api.github.com/users/tbranyen/followers","following_url":"https://api.github.com/users/tbranyen/following{/other_user}","gists_url":"https://api.github.com/users/tbranyen/gists{/gist_id}","starred_url":"https://api.github.com/users/tbranyen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tbranyen/subscriptions","organizations_url":"https://api.github.com/users/tbranyen/orgs","repos_url":"https://api.github.com/users/tbranyen/repos","events_url":"https://api.github.com/users/tbranyen/events{/privacy}","received_events_url":"https://api.github.com/users/tbranyen/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2016-02-10T17:05:37Z","updated_at":"2016-04-18T02:04:37Z","closed_at":"2016-04-18T02:04:37Z","body":"Currently it's not possible for a Custom Element to render itself and maintain markup through re-renders. That does not mean there is no merit in how they are designed. Currently they are very effective at enforcing progressive over existing markup. Although this makes it difficult to align with existing projects like React, Ember, Backbone, and Angular that allow \"Component\" instances to maintain their own rendering.\r\n\r\nConsider the following Custom Element definition:\r\n\r\n``` javascript\r\nclass MyCustomElement extends HTMLElement {\r\n  attachedCallback() {\r\n    this.render();\r\n  }\r\n\r\n  render() {\r\n    this.diffOuterHTML = `\r\n      <my-custom-element>\r\n        <h1>Rendered!</h1>\r\n      </my-custom-element>\r\n    `;\r\n  }\r\n}\r\n\r\ndocument.registerElement('my-custom-element', MyCustomElement);\r\n```\r\n\r\nIf this code was executed, anytime a `<my-custom-element/>` is attached to the DOM, the callback will render an `<h1/>` inside itself.\r\n\r\nOkay so that part is easy to understand and makes sense, but what happens if you're re-rendering the container for this custom-element, most likely your template looks like:\r\n\r\n``` html\r\n<main role=\"main\">\r\n  <my-custom-element></my-custom-element>\r\n</main>\r\n```\r\n\r\nSo the first time this is rendered into the DOM, the `<my-custom-element/>` is rendered and displays correctly, but the next render will compare the dynamic contents of the Custom Element to the empty container present in the page.\r\n\r\nMy recommendation is that this remain the default and expected behavior. However, I think we should allow a hook into the Virtual DOM process so that we can emulate the render flow behavior of something like React.\r\n\r\nI think it could work as simple as this.  If a Custom Element instance is detected, we check if it has a `render` method. If that method exists, we call it and abort diffing the element. This would mean that if no render method was attached, it would behave exactly as before and empty.\r\n\r\nOne of the major edge cases I can see right now is that if a Custom Element is using a Web Worker (async render) compared to a container rendering via UI (sync render), that the `renderComplete` will not be accurate (since the component will still be rendering). So the fix here is basically pushing a new Promise bound to the Custom Element's `renderComplete` event and always treating it as potentially async."},"comment":{"url":"https://api.github.com/repos/tbranyen/diffhtml/issues/comments/211153486","html_url":"https://github.com/tbranyen/diffhtml/issues/47#issuecomment-211153486","issue_url":"https://api.github.com/repos/tbranyen/diffhtml/issues/47","id":211153486,"user":{"login":"tbranyen","id":181635,"avatar_url":"https://avatars.githubusercontent.com/u/181635?v=3","gravatar_id":"","url":"https://api.github.com/users/tbranyen","html_url":"https://github.com/tbranyen","followers_url":"https://api.github.com/users/tbranyen/followers","following_url":"https://api.github.com/users/tbranyen/following{/other_user}","gists_url":"https://api.github.com/users/tbranyen/gists{/gist_id}","starred_url":"https://api.github.com/users/tbranyen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tbranyen/subscriptions","organizations_url":"https://api.github.com/users/tbranyen/orgs","repos_url":"https://api.github.com/users/tbranyen/repos","events_url":"https://api.github.com/users/tbranyen/events{/privacy}","received_events_url":"https://api.github.com/users/tbranyen/received_events","type":"User","site_admin":false},"created_at":"2016-04-18T02:04:37Z","updated_at":"2016-04-18T02:04:37Z","body":"I've thought about this more and I think that JSX/React render semantics belong in a ReactElement class that can be extended, they aren't necessary for an MVP implementation."}}