React / JSX HTML Comments

Enable HTML comments and conditional IE comments in React components and JSX using a Web Component.

This repository is intended to share a solution to include native HTML comments in React components and JSX. It uses a Web Component (W3C Custom Element) to transform text to a native HTML comment.

The solution depends on document.registerElement that requires a polyfill for most browsers, e.g. WebReflection/document-register-element.

You can read more about Web Components at www.webcomponents.org and facebook.github.io/react/docs/webcomponents.html.

Include the following javascript in your application to enable the <react-comment> Web Component.

/**
 * <react-comment> Web Component
 *
 * @usage
 *  <react-comment>Comment-text, e.g. [if lte IE 9]><script ... /><![endif]</react-comment>
 
 * @result
 *  <!--Comment-text, e.g. [if lte IE 9]><script ... /><![endif]-->
 */
var proto = Object.create(HTMLElement.prototype, {
 name: { get: function() { return 'React HTML Comment'; } },
 createdCallback: { value: function() {

  /**
   * Firefox fix, is="null" prevents attachedCallback
   * @link https://github.com/WebReflection/document-register-element/issues/22
   */
  this.is = '';
  this.removeAttribute('is');
 } },
 attachedCallback: { value: function() {
  this.outerHTML = '<!--' + this.textContent + '-->';
 } }
});
document.registerElement('react-comment', { prototype: proto });

To include a comment in your JSX or React component, simply include the <react-comment> tag with the comment-text as content.

JSX

<footer>Copyright {year}, Website.com</footer>
<react-comment>Page loaded in {loadtime} seconds</react-comment>

React component / element

var MyComponent = React.createClass({
 render: function() {
  return React.createElement('react-comment',{},'This is sample comment text.');
 }
});