Web Components - Separation of components

[alizedebray]

How to choose between creating a sub-component or just using an optional slot

Current state:

• the post-collapsible uses an optional "header" slot to show (or not) an accordion-header
• the post-tabs uses sub-components for tab headers and panels

[gfellerph]

Proposal for a workflow:

1. Analyse existing solutions on the component gallery and the ARIA Authoring Practices Guide (APG)
2. Make a proposal and discuss in the team. If necessary, involve stakeholders from UX or Development
3. Implement a MVP component and gather feedback on it
4. Improve based on feedback

General guidelines

• Can a piece of it be used standalone? Yes -> separate component
• Does creating one single component limit flexibility, like adding an icon or setting text? Yes -> separate components
• Simplicity, a web component should have one task only
• Don't use props for text input, use a slot (otherwise it's not possible to format text input)
• Provide value accessors when writing form-enabled components

Can you think of more points @imagoiq or @oliverschuerch?

[imagoiq]

No, I think the list is good, thanks! I have another article about the point "Simplicity" with some greats examples: https://www.smashingmagazine.com/2023/01/key-good-component-design-selfishness/