Create a web component following best practices for architectural and stylistic elements. The component should be implemented using the lit
library, with particular attention to accessibility, customisability, and reusability.
- The component must be fully functional, encapsulating all logic and styles necessary for its operation.
- Implement
static styles
usingcss
imported fromlit
, ensuring all CSS properties are exposed as custom properties on the host element for easy styling customisation. - Define slots and CSS parts to allow users to customise the content and style of different component parts.
- Ensure the component is accessible, including proper ARIA attributes and roles where necessary.
- Utilise
@property
and@state
decorators to manage the component's reactive state and expose public properties for customization. - Implement a clear and concise API documentation comment block above the class definition, detailing the purpose, usage, dependencies, events, slots, and CSS parts of the component.
- Component Structure: Your component should extend
LitElement
. - Styling: Expose each defined CSS property as a custom property via the host to allow for external styling.
- Functionality: Implement necessary logic for interactive elements (e.g., button clicks, focus management) while maintaining a clear separation between presentation and behaviour.
- Accessibility: Ensure the component adheres to WCAG guidelines, including keyboard navigability and ARIA roles.
- Properties and Attributes: Define properties for customisation, such as
variant
,size
,disabled
, ensuring they reflect to attributes as needed for CSS targeting. - Slots and Parts: Use slots to allow for content injection and CSS parts for styling customisation of the component's internal elements.
- Event Handling: Implement event handlers to manage user interactions and emit custom events to integrate with external application logic.
- Form Integration: If applicable, ensure the component can be used within forms, managing its own validity state and interacting with form submission/reset processes.
- Inline Documentation: Should use the following docblock elements (where necessary): @summary, @slot, @csspart, @cssproperty, @event
- A TypeScript class that extends
LitElement
, with detailed inline documentation. - CSS styles defined using
lit
'scss
function, exposed as custom properties. - A comprehensive set of properties and states to cover various use cases.
- Event handling for common interactions, emitting custom events where appropriate.
- Slots and CSS parts definitions for customisation.
- Example usage documentation, demonstrating how to incorporate the component into a web page.
Ensure your code is efficient, readable, and follows best practices for web component development. Use TypeScript for type safety and better developer experience. Comments should be clear, concise, and informative, guiding the user through the component's functionality and customisation options.
The functionality of the component is as follows:
Example: