<page-data>
The <page-data> component allows you to print current routing parameters, search queries, or history state directly in HTML without writing JavaScript selectors.
html
1<p>Viewing user ID: <page-data param="userId">unknown</page-data></p>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
param | string | undefined | The name of the path parameter to render (e.g. userId from /users/:userId). |
search-param | string | undefined | The name of the URL query parameter to render (e.g. filter from ?filter=active). |
key | string | undefined | The dot-notation key path to display from the history state payload. |
Fallback Values
Any content wrapped between <page-data> tags is treated as a default fallback value. It is rendered only if the requested property is undefined or unavailable:
html
1<!-- Renders: "Guest" if role is empty -->2<p>Role: <page-data key="role">Guest</page-data></p>Deep Key Resolution
When passing complex history payloads via <page-link>, use dot-notation in the key attribute to traverse nested objects:
html
1<!-- Navigation link -->2<page-link path="/dashboard" payload='{"user": {"profile": {"name": "Elson"}}}'>3 Dashboard4</page-link>5 6<!-- Extraction -->7<h3>Welcome, <page-data key="user.profile.name">Guest</page-data></h3>