Svelte In-Element

Need to render content from a Svelte component within an arbitrary element? We've got you covered.

This package is inspired by the in-element helper from Ember.js. It is similar to concepts like React portals and Vue "teleport".

Installation

npm install --save svelte-in-element

Usage

<script>
  import InElement from 'svelte-in-element';

  const myElement = document.querySelector('#myElement');
</script>

<InElement target={myElement}>
  <h2>Hello World</h2>
</InElement>

You can also pass a query selector string:

<InElement target="#myElement">
  <h2>Hello World</h2>
</InElement>

An optional insertBefore parameter allows you to insert the content at a specific position in the target.

Expected Behavior

• If the target is undefined, null, false, 0, "", etc., nothing is rendered and there is no error.
• If insertBefore is provided, the block will be rendered before the given element.
• If target or insertBefore changes, content will be removed from the original position in the DOM and added to the new destination.
• By default, the content of the target element is removed unless the value of insertBefore is a DOM node or null. When null is passed, the last child of the target element is treated as a boundary.

At present, this component will do nothing under server-side rendering.

Example

The test/ directory includes a simple e2e test that demonstrates this component in action. Simply run npm start and visit localhost:1337.

License

See LICENSE.txt.