A purely presentational comment block container that assembles the author avatar, name, time, content, and actions via slots; nested child comments are automatically indented.
"Can we revisit the wrapping strategy of this design on narrow screens?"
Agreed — one more scenario: the action area should keep a minimum gap when it wraps on narrow screens.
ReplyLike
Example
slot="reply" shows the reply target (e.g. "Reply to @someone") and slot="quote" shows the quoted original text. Both use a restrained style (secondary text + a left color bar) and hide automatically when empty.
The component itself does not handle editing: click "Reply" to expand an input, and the host inserts the child comment into the default slot on submit.
Reply
CancelSubmit
Example
Demonstrates dynamic slot composition of oas-comment + oas-textarea + oas-button: the submitted <oas-comment> goes into the default slot and is automatically indented with a guide line.
Comment
A purely presentational comment block container that assembles the author avatar, name, time, content, and actions via slots; nested child comments are automatically indented.
Basic Usage
Single comment
This component supports a purely presentational comment structure; interactions are provided by the host via the
actionsslot.Nested Child Comments
Nested replies (auto-indent)
Parent comment: I agree with this design; child comments are automatically indented with a guide line.
Child comment: nest
oas-commentvia the default slot, with no depth limit.Empty State
Empty comment
With no slot content at all, it renders as an empty container without errors; the sections of empty slots are hidden automatically.
Font Size
Font size follows the outer context (inherited) by default; override with the CSS variable
--oas-comment-font(e.g.18px).Alignment
Time / actions alignment (align)
Default alignment: time and actions are left-aligned (align defaults to left).
align="right": the time is pushed to the right and the whole action group is right-aligned.
align="left" | "right"controls the alignment of the time and actions. It is pure CSS (logical properties, so it flips automatically in RTL).Quote and Reply Target
quote / reply slots (reply-to scenario)
Agreed — one more scenario: the action area should keep a minimum gap when it wraps on narrow screens.
slot="reply"shows the reply target (e.g. "Reply to @someone") andslot="quote"shows the quoted original text. Both use a restrained style (secondary text + a left color bar) and hide automatically when empty.Reply Interaction
Editor composition (reply with an input)
The component itself does not handle editing: click "Reply" to expand an input, and the host inserts the child comment into the default slot on submit.
Demonstrates dynamic slot composition of
oas-comment+oas-textarea+oas-button: the submitted<oas-comment>goes into the default slot and is automatically indented with a guide line.API
oas-comment
Attributes
alignleft(default) /right(logical properties, flips in RTL)Slots
oas-commentchild comments, automatically indentedactionsauthoravataroas-avatar)contentquotereplytimeCSS Variables
--oas-comment-fontinheritParts:
::part(comment)root,::part(main)main body,::part(avatar),::part(body)content column (containing the::part(head)header row),::part(author)/::part(time)/::part(reply)/::part(quote)/::part(content)/::part(actions),::part(children)child comment container.