Component Reference

The AS Community UI layer is built from standard custom elements. In most integrations you only need <asc-comment-widget>, but the lower-level components are available when you want to compose your own flow.

Overview

Tag	Purpose
asc-comment-widget	Full comment widget with data loading and tenant-config handling
asc-comment-list	Paginated list shell for top-level comments
asc-comment-item	Single comment row with reply/edit/delete actions
asc-comment-form	New/edit/reply textarea form
asc-vote-buttons	Vote controls with optimistic UI hooks
asc-reply-list	Lazy-loaded reply thread shell

asc-comment-widget

Use this for the default integration. It owns comment loading, reply loading, voting, editing, deletion, and sort changes internally.

Attributes

Attribute	Type	Description
article-id	string	Article identifier for all requests
tenant-id	string	Tenant identifier used for config and API requests
api-base-url	string	Base URL for comment API calls
config-base-url	string	Optional separate base URL for GET /tenants/{tenantId}
theme-url	string	Optional JSON file of CSS variable overrides
fcm-token	string	Optional token forwarded on write requests
sort	'new' | 'score' | 'controversial'	Initial sort preference
inspect-mode	boolean	Enables token-inspection events for studio tooling

JS Properties

Property	Type	Description
tenantConfig	TenantConfig | null	Assign a full tenant config object directly

Events

The widget does not re-emit comment lifecycle events to the host page. It only exposes inspection events:

Event	Detail
asc-inspect-hover	{ tokens, label, rect } | null
asc-inspect-select	{ tokens, label, rect }

Notes

• Feature flags and behavior come from tenantConfig.features and tenantConfig.behavior, not custom HTML attributes such as show-voting or max-depth.
• If both theme-url and tenantConfig.theme are provided, theme-url wins because the widget fetches and applies it explicitly.

asc-comment-form

Attributes

Attribute	Type
context	'new' | 'edit' | 'reply'
parent-id	string | null
initial-content	string
comment-id	string
max-length	number
show-cancel	boolean

Events

Event	Detail
asc-comment-submit	{ context, content, parentId, commentId }
asc-comment-cancel	{}

Methods

• markSubmitSuccess()
• markSubmitError(message: string)

asc-comment-item

JS Properties

Property	Type
comment	Comment | null
userVote	'up' | 'down' | ''
editing	boolean
allowVoting	boolean
allowReplies	boolean
allowEdit	boolean
allowDelete	boolean
showModerationStatus	boolean
maxLength	number

Events

Event	Detail
asc-comment-edit	{ commentId: string }
asc-comment-delete	{ commentId: string }
asc-comment-reply	{ commentId: string; depth: number }

asc-comment-list

JS Properties

Property	Type
comments	Comment[]
userVotes	Record<string, 'up' | 'down' | null>
isLoading	boolean
hasError	boolean
errorMessage	string
hasNextPage	boolean
isLoadingMore	boolean

Events

• asc-load-more
• asc-retry

asc-vote-buttons

Attributes

Attribute	Type
comment-id	string
up-count	number
down-count	number
user-vote	'up' | 'down' | ''

Events and Methods

• asc-vote-change with { commentId, direction }
• markVoteComplete()

asc-reply-list

Attributes / Properties

Name	Type
parent-id	string
reply-count	number
has-next-page	boolean
replies	Comment[]
userVotes	Record<string, 'up' | 'down' | null>

Events and Methods

• asc-load-replies with { commentId }
• markRepliesLoaded()