Add renderLocation option

index.md

@@ -176,6 +176,8 @@ to disable.  Each button in the array is an object of the format:
 - `advanceOn`: An action on the page which should advance shepherd to the next step.  It can be of the form `"selector event"`, or an object with those
 properties.  For example: `".some-element click"`, or `{selector: '.some-element', event: 'click'}`.  It doesn't have to be an event inside
 the tour, it can be any event fired on any element on the page.  You can also always manually advance the Tour by calling `myTour.next()`.
+- `renderLocation`: An `HTMLElement` or selector string of the element you want the tour step to render in. Most of the time, you will
+not need to pass anything, and it will default to `document.body`, but this is needed for `<dialog>` and might as well support passing anything.
 - `showCancelLink`: Should a cancel "✕" be shown in the header of the step?
 - `scrollTo`: Should the element be scrolled to when this step is shown?
 - `when`: You can define show, hide, etc events inside when. For example:

src/js/shepherd.js

@@ -531,7 +531,17 @@ class Step extends Evented {
       content.appendChild(footer);
     }
 
-    document.body.appendChild(this.el);
+    const { renderLocation } = this.options;
+
+    if (renderLocation) {
+      if (renderLocation instanceof HTMLElement) {
+        renderLocation.appendChild(this.el);
+      } else if (typeof renderLocation === 'string') {
+        document.querySelector(renderLocation).appendChild(this.el);
+      }
+    } else {
+      document.body.appendChild(this.el);
+    }
 
     this.setupPopper();