An adaptable component is a reusable Web Component whose presentation changes with its usage context. The exercise component renders in both the exercise library and workout plan, while :host selectors respond to context classes such as cardio and strength. section 9.4
Build the component around a small, reusable data and styling interface:
- Define getters and setters so attributes and JavaScript properties can represent the same data. section 9.4
- Serialize exercise data into attributes, omitting undefined values for different exercise shapes. section 9.4
One component, two visual variants
Render <wkout-exercise> with class="cardio" for a timed jog or class="strength" for pushups. Both instances share the component while their host classes select different border colors.
