-
-
Save OlavHN/ff73b104bb25e5e08a51 to your computer and use it in GitHub Desktop.
| <!doctype html> | |
| <html> | |
| <head> | |
| <!-- Web Component Polyfill for old browsers --> | |
| <script src="https://www.polymer-project.org/platform.js"></script> | |
| <!-- Release candidate of next React --> | |
| <script src="http://fb.me/react-with-addons-0.12.0-rc1.js"></script> | |
| <script src="http://fb.me/JSXTransformer-0.12.0-rc1.js"></script> | |
| <!-- Import a web component --> | |
| <link rel="import" href="https://www.polymer-project.org/components/core-icons/core-icons.html"> | |
| </head> | |
| <body> | |
| <!-- Web component in its natural habitat --> | |
| <core-icon src="//www.polymer-project.org/images/icons/android.svg"></core-icon> | |
| <!-- React renders to Web Components!!! --> | |
| <div id="react-root"></div> | |
| <script type="text/jsx"> | |
| var coreIcon = React.createElement('core-icon', {src: '//www.polymer-project.org/images/icons/android.svg'}); | |
| React.render(coreIcon, document.getElementById('react-root')) | |
| </script> | |
| </body> | |
| </html> |
@OlavHN That's actually not a big deal. Elements created with Polymer are also just elements. Elements created with Web Components technologies without Polymer would work as well, because they are also just elements. That's the whole idea behind Web Components. If that wouldn't work, we did something wrong.
However, what would be interesting is seeing React being able creating Web Components on it's own.
It's nice to see when React renders components. I don't think this is really a big deal since the time will come and with good browser support (and market) for web components, effort would be poured in to get it complete. It's great but not a big deal :)
Worth mentioning that react will not render non-standard attributes. This example works because src is a whitelisted attribute in React. Other web components will not work currently unless you patch React to allow for any attribute.
See this webpage here http://htmlpreview.github.io/?https://gist.githubusercontent.com/OlavHN/ff73b104bb25e5e08a51/raw/dc6075bae1595b561e6b1c35c3da72d808f92f20/gistfile1.html