Portal

Portal allows content to escape width restrictions of a Block or HeroBlock.

CAVEATS:

1. You should only use this component in the HeroBlock, and only once.

2. It only allows a single child inside it:

   // THIS WILL BREAK
   <Portal>
     <div>
       <!-- content -->
     </div>
     <div>
       <!-- content -->
     </div>
   </Portal>
   
   // Correct
   <Portal>
     <div>
       <!-- content -->
     </div>
   </Portal>
   

3. Because of the restrictions of Vue 2, the content will be sent to another block and will not inherit the styles from the element with same kind in the Block.

4. This component uses portal-vue internally so it will have same caveats. However, in normal use, you should only need to take special care of the ref problem

Example:

<template>
  <HeroBlock :block="block">
    <Portal>
      <!-- content will be render at the end of root div element -->
    </Portal>
  </HeroBlock>
</template>