Acetoshi

💡 Angular Component Selectors and HTML Semantics: A Clean Solution

In modern web development, writing semantically correct HTML is important — for accessibility, browser consistency, and maintainability. But if you're using Angular, you may have run into a frustrating problem: Angular component selectors don’t always play nicely with HTML hierarchy.

---

🚧 Part 1: The Problem — Angular Component Tags Break HTML Semantics

By default, Angular components are used with custom tags like:

Acetoshi

Branch naming

[BUGFIX/HOTFIX/REFACTO/FEATURE/SETUP/CHORE]/US[USnumber]/[featureName]  
>> DEV/US23/SignUpForm
>> BUGFIX/US103/CSSisBroken

[BUGFIX/HOTFIX/REFACTO/FEATURE/SETUP/CHORE] # Type of task or work being done:

• BUGFIX: Fixing an issue or bug

Acetoshi

VITEST SETUP

dependencies

on installe @testing-library/jest-dom et jsdom

npm i vitest jsdom @testing-library/react @testing-library/jest-dom --save-dev

vite.config.ts

on ajoute un élément de test