Comparison tables
Compare qualitative options through a semantic feature matrix.
Live preview
| Capability | Basic | Full |
|---|---|---|
| Components | Core | Full |
| Customization | Tokens | Tokens |
| Self-hosted | Yes | Yes |
HTML
<div class="xsh-table-wrap">
<table class="xsh-table xsh-comparison-table">
<caption>Example capabilities</caption>
<thead>
<tr>
<th scope="col">Capability</th>
<th scope="col">Basic</th>
<th scope="col">Full</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Components</th>
<td>Core</td>
<td>Full</td>
</tr>
<tr>
<th scope="row">Customization</th>
<td>Tokens</td>
<td>Tokens</td>
</tr>
<tr>
<th scope="row">Self-hosted</th>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
xsh-comparison-table | Used by the example markup and component styles or behavior. |
scope | Used by the example markup and component styles or behavior. |
caption | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Header cells give readable row and column relationships.
Implementation note. Avoid relying on checkmarks alone when comparing products.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.