Export component specifically for rendering html

packages/metal-jsx/src/DangerouslySetHTML.js

@@ -0,0 +1,32 @@
+'use strict';
+
+import Component from './JSXComponent';
+import { Config } from 'metal-state';
+
+/**
+ * JSXComponent that renders html passed in.
+ * @class
+ */
+class DangerouslySetHTML extends Component {
+	/**
+	 * @return {Component}
+	 */
+	render() {
+		const {content, tag} = this.props;
+
+		IncrementalDOM.elementOpen(tag, null, null);
+
+		const node = IncrementalDOM.elementClose(tag);
+
+		node.innerHTML = content;
+
+		return node;
+	}
+}
+
+DangerouslySetHTML.PROPS = {
+	content: Config.string(),
+	tag: Config.string().value('span'),
+};
+
+export default DangerouslySetHTML;

packages/metal-jsx/src/JSXComponent.js

@@ -3,6 +3,7 @@
 import './iDOMHelpers';
 import { validators, Config } from 'metal-state';
 import Component from 'metal-component';
+import DangerouslySetHTML from './DangerouslySetHTML';
 import IncrementalDomRenderer from 'metal-incremental-dom';
 import JSXDataManager from './JSXDataManager';
 import JSXRenderer from './JSXRenderer';
@@ -38,4 +39,4 @@ JSXComponent.DATA_MANAGER = JSXDataManager;
 JSXComponent.RENDERER = JSXRenderer;
 
 export default JSXComponent;
-export { validators, Config, JSXComponent };
+export { DangerouslySetHTML, validators, Config, JSXComponent };

packages/metal-jsx/test/DangerouslySetHTML.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import DangerouslySetHTML from '../src/DangerouslySetHTML';
+
+describe('JSXComponent', function() {
+	var component;
+
+	afterEach(function() {
+		if (component) {
+			component.dispose();
+		}
+	});
+
+	it('should render', function() {
+		component = new DangerouslySetHTML();
+		assert.strictEqual('SPAN', component.element.tagName);
+	});
+
+	it('should render with custom tag', function() {
+		component = new DangerouslySetHTML({tag: 'div'});
+		assert.strictEqual('DIV', component.element.tagName);
+	});
+
+	it('should render with html content', function() {
+		var content = '<h2>hello</h2><div><span>world</span></div>';
+
+		component = new DangerouslySetHTML({content: content});
+		assert.strictEqual(content, component.element.innerHTML);
+	});
+});