A component is a reusable, standalone unit of interface code that combines structure, styling, behavior, and optionally a customization API. Its purpose is to adapt across contexts instead of forcing users to modify internal implementation. section 3.0 section 6.7
Build a component around a small public surface:
- Expose configuration through properties, getters, setters, or reflected attributes rather than hard-coded values. section 3.2 section 11.5
- Separate the component’s template, styles, and behavior so each part can be reused or customized. section 6.7
- Choose styling boundaries deliberately, using Shadow DOM, CSS variables, or importable CSS modules according to the surrounding system. section 11.0 section 15.1
A configurable slider
A slider becomes shareable when its template and behavior move into separate modules, while size and background remain configurable from the page. The host can use <wcia-slider backgroundcolor="#ff0000" value="50"></wcia-slider> without editing the component’s internal files.
