sesamy-visibility

A simple web component that conditionally renders content based on user authentication status.

The component applies no styling of its own: slotted content stays in the light DOM and is styled by your page's own CSS. See Styling Components.

Basic Usage

<sesamy-visibility>
  <div slot="logged-in">This content is only visible when logged in</div>
  <div slot="not-logged-in">This content is only visible when not logged in</div>
</sesamy-visibility>

Slots

logged-in

Content placed in this slot will only be visible when the user is authenticated.

<sesamy-visibility>
  <div slot="logged-in">
    <h2>Welcome back!</h2>
    <p>You have access to premium content.</p>
  </div>
</sesamy-visibility>

not-logged-in

Content placed in this slot will only be visible when the user is not authenticated.

<sesamy-visibility>
  <div slot="not-logged-in">
    <h2>Sign in to continue</h2>
    <p>Create an account to access exclusive content.</p>
  </div>
</sesamy-visibility>

Use Cases

This component is useful for:

• Showing different navigation items based on authentication state
• Displaying user-specific content or calls-to-action
• Toggling between login prompts and authenticated user content
• Conditional rendering in static HTML pages

Example: Complete Login Flow

<sesamy-visibility>
  <div slot="not-logged-in">
    <h1>Please log in</h1>
    <sesamy-login></sesamy-login>
  </div>

  <div slot="logged-in">
    <h1>Your Dashboard</h1>
    <sesamy-content-container item-src="https://example.com/premium-content">
      <div slot="content">
        <p>This is your premium content...</p>
      </div>
    </sesamy-content-container>
  </div>
</sesamy-visibility>