In most projects, component names should always be PascalCase in Single-File Components and string templates - but kebab-case in in-DOM templates.
PascalCase allows editors to autocomplete component names and is more visually distinct from single-word HTML elements. However, if you've already invested heavily in kebab-case, using it everywhere is also acceptable for consistency.
Side-by-side examples engineers can pattern-match during review.
<mycomponent/>
<myComponent/>
<MyComponent></MyComponent>
<MyComponent/>
<my-component></my-component>
OR
<my-component></my-component><mycomponent/> <MyComponent></MyComponent> <MyComponent/> <my-component></my-component> <my-component></my-component> From the same buckets as this rule.
For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.