<pa-conversation>: The conversation element
The <pa-conversation> element represents a conversation containing elements for displaying information related to the conversation as well as controls for interacting with it. It may contain flow content but must not have other <pa-conversation> element desendants.
When connected to a document the element will retrieve conversation data from the Particiapp API frontend server.
The internal state of the conversation is exposed via CSS custom states and the Javascript API, state changes are signalled by events.
Initially the element is in the loading state and will transition to either the loaded or error state dependening on whether the conversation data was loaded successfully.
In the loaded state descendant elements such as <pa-topic> or <pa-description> will be updated based on the conversation data.
The element will also poll the API in regular intervals for updated results and new statements if the user has been authenticated or authentication has been disabled.
Additionally, the inactive and unauthenticated states may be set dependening on whether the conversation is inactive and the conversation requires authentication and the user has not been authenticated.
These states are also propagated to descendant elements such as <pa-login-button> or <pa-vote-button> and via events.
Attributes
base- The base URL of the Particiapp API frontend server. This attribute is only read once the element is first connected to the document, changing it afterwards has no effect. Omitting this attribute or setting it to an empty value is an error.
conversation-id- The identifier referring to an conversation on the frontend server. This attribute is only read once the element is first connected to the document, changing it afterwards has no effect. Omitting this attribute or setting it to an empty value is an error.
disabled- If present disables any user interactions.
hidden- Indicates that the element content should not be shown.
Styling
Custom states
The element exposes the following internal states for use in CSS selectors using the element:
loading- The conversation is still loading.
loaded- The conversation has finished loading.
error- An error has occurred and the conversation cannot be displayed.
inactive- The conversation is inactive and user interactions are not possible.
unauthenticated- The conversation requires authentication and user interactions are not possible.
Javascript Interface
See ParticiappConversationElement.