TeleportController

Purpose

Transport an element from one place in the DOM, to another.

This controller is ephemeral, once it has performed its duty it will remove itself and all its values from the element.

Use Case

Mostly useful for AJAX loaded/"HTML over the wire" elements that need to be placed elsewhere in the DOM than they were loaded.

Actions

Action	Purpose
execute	Perform the moving of the element

Targets

Target	Purpose	Default
-	-	-

Classes

Class	Purpose	Default
-	-	-

Values

Value	Type	Description	Default
immediate	Boolean	Set to true to immediately teleport the element on controller connect	false
target	String	The CSS selector corresponding to the desired position in the DOM	-
insert	String	How to add the element to the DOM. Possible values:	-
		Any one of the parameters accepted by insertAdjacentHTML	-
		replaceOuter - replace the destination element entirely	-
		replaceInner - replace the inner contents of the destination element	-
		prepend - add the element as the first child of the destination element (alias for afterbegin)	-
		append - add the element as the last child of the destination element (alias for beforeend)	-

Events

Event	When	Dispatched on	event.detail
teleport:error	When the controller cannot find the target destination from the given selector	The controller element	-

Side Effects

None

How to Use

HTML

<!-- Before -->
<div>
  <div data-controller="teleport" data-teleport-target-value="#blue-portal" data-teleport-insert-value="replaceInner">
    Aperture Science Experiment #11616
  </div>

  <div id="blue-portal">
    The cake is a lie.
  </div>
</div>

<!-- After -->
<div>
  <div id="blue-portal">
    <div>
      Aperture Science Experiment #11616
    </div>
  </div>
</div>