View

URL-based view container for single-page routing.

Usage

<w-view path="/home">
  <h1>Home Page</h1>
  <p>Welcome to the home page.</p>
</w-view>

<w-view path="/about">
  <h1>About Page</h1>
  <p>Learn more about us.</p>
</w-view>

Props

Prop	Type	Default	Description
path	string	""	URL path that activates this view
label	string	""	Accessible label (adds landmark role)
active	boolean	false	Whether the view is currently visible

Events

Event	Detail	Description
view-change	{ active, path }	Fired when visibility changes

Methods

Method	Description
navigate()	Navigate to this view's path
isActive()	Check if currently active
refresh()	Force refresh visibility state

Examples

With Navigation

<w-nav label="Navigation">
  <w-slot item><w-link href="/home">Home</w-link></w-slot>
  <w-slot item><w-link href="/about">About</w-link></w-slot>
  <w-slot item><w-link href="/contact">Contact</w-link></w-slot>
</w-nav>

<main>
  <w-view path="/home">
    <h1>Home</h1>
  </w-view>

  <w-view path="/about">
    <h1>About</h1>
  </w-view>

  <w-view path="/contact">
    <h1>Contact</h1>
  </w-view>
</main>

With Accessible Label

When you add a label, the view becomes a landmark region:

<w-view path="/dashboard" label="Dashboard content">
  <h1>Dashboard</h1>
</w-view>

This renders with role="region" and aria-label="Dashboard content".

Nested Routes

<w-view path="/settings">
  <h1>Settings</h1>

  <w-nav label="Settings sections">
    <w-slot item><w-link href="/settings/profile">Profile</w-link></w-slot>
    <w-slot item><w-link href="/settings/account">Account</w-link></w-slot>
  </w-nav>

  <w-view path="/settings/profile">
    <h2>Profile Settings</h2>
  </w-view>

  <w-view path="/settings/account">
    <h2>Account Settings</h2>
  </w-view>
</w-view>

Routing Modes

Views automatically use the routing mode configured in App.start():

Hash Mode

App.start({ hash: true });

URLs: https://example.com/#/about

Pathname Mode

App.start({ hash: false, base: "/app" });

URLs: https://example.com/app/about

Path Matching

• Paths are matched case-insensitively
• Leading slashes are normalized (/about matches about)
• Hyphens are ignored in matching (/about-us matches /aboutus)

Styling

The active view has [active]; inactive ones are hidden via the [hidden] attribute (already invisible).

/* Style only the visible view */
w-view[active] {
  animation: fadeIn 0.2s ease;
}

/* Optional: a label-bearing view becomes role="region" */
w-view[role="region"] {
  outline: 1px dashed #ccc;
  padding: 1rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Selector	Targets
w-view[active]	Currently visible view
w-view[hidden]	Inactive view (already display: none)
w-view[role="region"]	View with label (landmark)

Accessibility

• Hidden views use hidden attribute (removed from accessibility tree)
• Optional role="region" when label is provided
• aria-label for landmark navigation
• No role by default (just a container)