<page-route-query>
The <page-route-query> component mounts content conditionally based on URL search query parameter values (?key=value) instead of the URL pathname.
This component is ideal for creating tabbed navigation, filters, or modular modals without writing JavaScript state logic.
html
1<page-route-query key="modal" value="open">2 <div class="modal-dialog">3 <h3>System Settings</h3>4 <p>Modify application values here...</p>5 </div>6</page-route-query>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
key | string | undefined | The search parameter name to watch (e.g. "tab"). |
value | string | undefined | The exact parameter value that triggers a match. |
src | string | undefined | Relative path to an external file (HTML, JS, TXT) to load on-demand. |
name | string | undefined | Mutually exclusive query-route group identifier. |
Example: Tabbed Layout
Combine <page-route-query> with <page-link> to create fully declarative, active-state-aware tabs:
html
1<div class="tabs-container">2 <!-- 1. Tabs navigation -->3 <div class="tab-headers">4 <page-link search="tab=profile">Profile Settings</page-link>5 <page-link search="tab=security">Security Panel</page-link>6 </div>7 8 <!-- 2. Conditionally rendered views -->9 <div class="tab-contents">10 <page-route-query key="tab" value="profile" name="settings-tab">11 <h3>Profile Settings</h3>12 <p>Update your display name and email address...</p>13 </page-route-query>14 15 <page-route-query16 key="tab"17 value="security"18 name="settings-tab"19 src="./tabs/security.html"20 >21 <div slot="loading">Loading security module...</div>22 </page-route-query>23 </div>24</div>Behavior and Caching
- Just like
<page-route>, the query matcher detaches template views when the parameter doesn't match and caches them. - When the query matches again, the cached template is restored instantly.
- Loader slots (
loading) and fallbacks (fallback) are fully supported when using thesrcattribute.