Comment
Displays a single comment with a header (author, timestamp, avatar with an initials fallback), a body and an optional row of actions. Nest pura-comment elements as children to create indented replies with an automatic connector line. Use it in comment sections, threads and discussion feeds. Agent-native layer: each instance exposes role="article", stable data-* attributes (data-pura-component, data-author, data-time, data-depth, data-reply-count) and an aria-label summarizing author and body, plus it registers itself in window.__puraComments, allowing agents and screen readers to traverse the thread structure without touching the Shadow DOM.
Preview
<pura-comment author="Mary Stone" time="2 hours ago" avatar="https://i.pravatar.cc/64?img=47">
I loved the new component API, it's so much simpler to use now.
<div slot="actions">
<a href="#">Reply</a>
<a href="#">Like</a>
</div>
<pura-comment author="Andrew Ahlert" time="1 hour ago">
Agreed! The support for nested replies turned out great.
<div slot="actions">
<a href="#">Reply</a>
</div>
</pura-comment>
</pura-comment>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
author | string | "" | Display name of the commenter, shown in bold in the header. Generates the initials used in the avatar fallback; when absent, shows "Anonymous". |
time | string | "" | Timestamp/date text shown next to the author, rendered in a <time> (also used as datetime). Hidden when empty. |
avatar | string | (none) | Optional URL of the avatar image. When absent, or if the image fails to load, it falls back to the author's initials. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/comment.js"></script>import "./pura/lib/comment.js";