Scoped Styles Skip the Layer Wrapper; Global Styles Need It

One rule covers every framework's styling model: if the framework auto-scopes a component's styles, they need no @layer components wrapper; if you opt out of scoping, the styles are global and must be wrapped.

Auto-scoped (no wrapper)	Global (wrap in @layer components)
Angular Emulated (attribute rewrite)	Angular ViewEncapsulation.None
Vue <style scoped>	Vue <style> (no scoped)
Svelte component <style>	Svelte :global()
—	Vanilla CSS (every component file)

Why: auto-scoping (attribute selectors / class hashing) already isolates a component, so its styles can't conflict — letting them stay unlayered is harmless. Once styles go global they re-enter the shared cascade and, being unlayered, would outrank @layer overrides (see Unlayered CSS Beats Layered CSS) and break the override pattern. The @layer components wrapper puts them back under control.

The deeper point: the layer wrapper does the isolation work that framework encapsulation does for free — you only pay for it where encapsulation is absent.

Source: css-conventions skill §13.