{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/5052","labels_url":"https://api.github.com/repos/facebook/react/issues/5052/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/5052/comments","events_url":"https://api.github.com/repos/facebook/react/issues/5052/events","html_url":"https://github.com/facebook/react/issues/5052","id":109787985,"number":5052,"title":"React and WebComponents","user":{"login":"cosminnicula","id":582616,"avatar_url":"https://avatars.githubusercontent.com/u/582616?v=3","gravatar_id":"","url":"https://api.github.com/users/cosminnicula","html_url":"https://github.com/cosminnicula","followers_url":"https://api.github.com/users/cosminnicula/followers","following_url":"https://api.github.com/users/cosminnicula/following{/other_user}","gists_url":"https://api.github.com/users/cosminnicula/gists{/gist_id}","starred_url":"https://api.github.com/users/cosminnicula/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cosminnicula/subscriptions","organizations_url":"https://api.github.com/users/cosminnicula/orgs","repos_url":"https://api.github.com/users/cosminnicula/repos","events_url":"https://api.github.com/users/cosminnicula/events{/privacy}","received_events_url":"https://api.github.com/users/cosminnicula/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-10-05T12:43:19Z","updated_at":"2015-10-16T12:12:27Z","closed_at":null,"body":"I see a lot of questions, blog posts and discussions around ```React``` and ```WebComponents```, but none of them are actually an official statement from Facebook that could clarify whether or not ```React``` will going to implement ```WebComponents``` W3C specs in the future.\r\n\r\nThere are also quite a few GitHub Issues around this subject, like \"Enable rendering into shadow roots\" #1167, \"Allow rendering into a document fragment\" #840, \"Track upcoming DOM technology upgrades\" #2836, \"Proof of concept: Shadow DOM support\" #1877, \"Support for custom DOM elements & attributes\" #2746, \"Templates?\" #2286, \"Add naive custom element support\" #1249, \"Add support in the future for custom elements\" #1214 etc.\r\n\r\nNevertheless there are some open-source projects that allows ```React``` to be ```WebComponents```-aware, like https://github.com/Wildhoney/Maple.js, https://github.com/wix/react-templates or https://github.com/PixelsCommander/ReactiveElements\r\n\r\nAs for ```WebComponents```, it seems that the reconciliation between ```HTML Imports``` and ```ES6 Modules``` is inevitable, thus the ```HTML Imports``` part of the spec might need to change in order to be widely accepted among the open-source community and browser vendors https://bugzilla.mozilla.org/show_bug.cgi?id=877072 Until then, wrapping components and importing them as ```ES6 Modules``` is as good as including them in HTML pages and importing them with ```<link rel=\"import\" />```\r\n\r\nThe ```Custom Elements``` are more or less about defining new markup that you can interact in the same way as with native HTML elements, allowing you to extend existing native HTML elements and giving you some lifecycle methods. This is already possible with ```React``` and ```JSX```, even though ```JSX```'s XHTML-like syntax transpiles to JavaScript which ultimately becomes HTML through the ```Virtual DOM```.\r\n\r\n```Shadow DOM``` is hard and in some cases even impossible to be polyfilled. This is the reason why ```Polymer``` is using ```Shady DOM``` https://www.polymer-project.org/1.0/articles/shadydom.html With the current browser support http://caniuse.com/#feat=shadowdom, adopting ```BEM``` conventions or even inline styles backed by JavaScript objects, which is what ```React``` is doing, remains a viable alternative but still is different from ```Shadow DOM```.\r\n\r\n```Templates``` are really pointless without data binding. Two-way data binding is slow because the ```Object.observe``` polyfill (https://github.com/Polymer/observe-js) is slow. Also, two-way data binding is about code complexity and the fact that the more dependencies you have between between components, the bigger the complexity grows, as opposed to unidirectional data flow. ```React```'s one-way data flow with immutable data structures has the potential to scale and be highly performant, especially if we think about large-scale applications and complex interactions between thousands of entities.\r\n\r\nEven though the open-source community is looking both at ```React``` and ```WebComponents```, in the end the developer experience is what matters most and drives adoption. No doubt standards are having their own place in this.\r\n\r\nTherefore, my question is: what is ```React```'s strategy for ```WebComponents```?\r\n\r\n@sebmarkbage any thoughts?"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/148700758","html_url":"https://github.com/facebook/react/issues/5052#issuecomment-148700758","issue_url":"https://api.github.com/repos/facebook/react/issues/5052","id":148700758,"user":{"login":"brigand","id":936069,"avatar_url":"https://avatars.githubusercontent.com/u/936069?v=3","gravatar_id":"","url":"https://api.github.com/users/brigand","html_url":"https://github.com/brigand","followers_url":"https://api.github.com/users/brigand/followers","following_url":"https://api.github.com/users/brigand/following{/other_user}","gists_url":"https://api.github.com/users/brigand/gists{/gist_id}","starred_url":"https://api.github.com/users/brigand/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brigand/subscriptions","organizations_url":"https://api.github.com/users/brigand/orgs","repos_url":"https://api.github.com/users/brigand/repos","events_url":"https://api.github.com/users/brigand/events{/privacy}","received_events_url":"https://api.github.com/users/brigand/received_events","type":"User","site_admin":false},"created_at":"2015-10-16T12:12:27Z","updated_at":"2015-10-16T12:12:27Z","body":"@majorye if your intent was to get notifications there's a subscribe button in the top right of each issue."}}