Lion Logo Lion Guides Components Docs Blog Toggle darkmode

Dialog: Features

lion-dialog is a component wrapping a modal dialog controller. Its purpose is to make it easy to use our Overlay System declaratively.

<lion-dialog>
  <div slot="content">
    This is a dialog
    <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>x</button>
  <div>
  <button slot="invoker">Click me</button>
</lion-dialog>

Styling content

It's not possible to style content from the dialog component. This is because the content slot is moved to the global root node. This is why a custom component should be created and slotted in as the content. This ensures style encapsulation on the dialog content.

Content with slots

Close overlay from component slotted as content

The overlay cannot be closed by dispatching the close-overlay from a button in a styled component that is slotted in as content, because it will not cross the shadow boundary of the component. A method should be created that will dispatch the close-overlay event from the component.

Placement overrides

Configuration passed to config property:

{
  viewportConfig: {
    placement: ... // <-- choose a position
  }
}

Other overrides

No backdrop, hides on escape, prevents scrolling while opened, and focuses the body when hiding.

Configuration passed to config property:

{
  hasBackdrop: false,
  hidesOnEscape: true,
  preventsScroll: true,
  elementToFocusAfterHide: document.body
}