Support passing elements for text (#493)

Fixes #492

demo/js/welcome.js

@@ -63,11 +63,14 @@
       useModalOverlay: true
     });
 
+    const element = document.createElement('p');
+    element.innerText = 'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.';
+
     // These steps should be added via `addSteps`
     const steps = [
       {
         title: 'Including',
-        text: 'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.',
+        text: element,
         attachTo: {
           element: '.hero-including',
           on: 'bottom'

src/js/components/shepherd-content/shepherd-text/index.jsx

@@ -1,9 +1,26 @@
 import preact from 'preact';
-import { isFunction } from '../../../utils/type-check';
+import { isElement, isFunction } from '../../../utils/type-check';
 
 const { Component } = preact;
 
 export default class ShepherdText extends Component {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  componentDidMount() {
+    const { step } = this.props;
+    let { text } = step.options;
+
+    if (isFunction(text)) {
+      text = text.call(step);
+    }
+
+    if (isElement(text)) {
+      this.base.appendChild(text);
+    }
+  }
+
   render(props) {
     const { descriptionId, step, styles } = props;
     let { text } = step.options;
@@ -14,7 +31,7 @@ export default class ShepherdText extends Component {
 
     return <div
       className={styles.text.trim()}
-      dangerouslySetInnerHTML={{ __html: text }}
+      dangerouslySetInnerHTML={{ __html: !isElement(text) ? text : null }}
       id={descriptionId}
     />;
   }