# MountingPortal

This component extends the behaviour of a normal <Portal> by also mounting a <PortalTarget> to a DOM Element that the developer specifics with a selector string. (i.e. #target-id).

It also makes sure to clean up and remove the <PortalTarget> when it's being destroyed.

Apart from that, this component behaves like a normal <Portal> - but to make the previously described behaviour work, a few additional props exist.

# Example Usage

<MountingPortal 
  mountTo="#targetId"
  append
  :to="to" 
  name="source"
>
  <p>This is the content for the portal</p>
</MountingPortal>

# Props

# append

If true, a <div> will be appended to the target element defined by mountTo and the <PortalTarget> will be mounted to this new child element.

append can also be a string, in which case it's assumed to be a valid HTMLElement name, and the element that's created won't be a <div> but instead whatever that string defines (i.e. 'span'). Passing a component name will not work.

# bail

If a name for the Target was given, you can come across duplicates. If a Target with that name already exists, MountingPortal will usually re-use the already existing Target instead of mounting a new one.

This is generally advantageous: if you intend to send content from multiple sources to the same target and can't be sure if the shared <PortalTarget> already exists.

However, if you set the bail prop, the component will not re-use an already existing target and instead abort and log a warning to the console.

# mountTo

A querySelector String defining the DOM element to mount the <PortalTarget> to.

# Portal Props

All Props from <Portal> work as well.

# PortalTarget Props

You can also define all props for the <PortalTarget> on the <MountingPortal>, but a few changes were necessary to avoid collisions with props from <Portal>:

• name is not used, instead use to
• tag is called targetTag
• slotProps is called targetSlotProps

Props working the same:

• multiple
• transition

# Slots

This component expects to receive a default scoped slot. If it's not passed, an an error will be logged

# The manual slot

# to (prop)

If you don't want to have <MountingPortal> create the portal for you, you can instead pass it a scopedSlot named manual which will receive the to name for the created <PortalTarget>, so you can set up the <Portal> yourself however you please.

<MountingPortal mountTo="#target-id">
  <div slot="manual" slot-scope="{to}" class="some-styles">
    <portal :to="to"> </portal>
  </div>
</MountingPortal>