Class PortalDirective

render

• render(
      content: unknown,
      targetOrSelector: TargetOrSelector | Promise<TargetOrSelector>,
      options?: PortalOptions,
  ): symbol

  Main render function for the directive.

  For clarity's sake, here is the outline of the function body::

  • Resolve targetOrSelector to an element.

  • If the directive's container property is undefined,

    • then create the container element and store it in the property.

  • If modifyContainer is provided in the options,

    • then call modifyContainer(container).

  • If the target has changed from one element to another,

    • then migrate container to the new target and reassign the directive's target property.

  • If the directive's target property is undefined,

    • then store the target element in the property.

    • If a placeholder is provided in the options,

      • then append container to target (if necessary) and render placeholder in container.

  • Resolve content (awaited).

  • Append container to target (if necessary) and render content in container.

  The steps are organized this way to balance the initalization and refreshing of crucial properties like container and target while ensuring that container isn't added to the DOM until the directive is about to render something (either placeholder or content).

  Parameters

  • content: unknown

    The content of the portal. This parameter is passed as the value parameter in Lit's render function.

    The content parameter can be a promise, which will be rendered in the portal once it resolves.
  • targetOrSelector: TargetOrSelector | Promise<TargetOrSelector>

    The "target" for the portal. If the value is a string, then it is treated as a query selector and passed to document.querySelector() in order to locate the portal target. If no element is found with the selector, then an error is thrown.
  • Optionaloptions: PortalOptions

    See PortalOptions.

  Returns symbol

  This function always returns Lit's nothing value, because nothing ever renders where the portal is used.