diff --git a/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx
index 5899b46b6bc..784ec1f878e 100644
--- a/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx
+++ b/packages/docs/src/routes/docs/(qwik)/components/styles/index.mdx
@@ -187,6 +187,11 @@ export const Cmp = component$(() => {
 ## Scoped CSS
 
 To use scoped CSS, you can use the `useStylesScoped$()` hook exported from `@builder.io/qwik`.
+> `useStylesScoped$()` uses emojis to set a unique name on the selector. This is added by Qwik to avoid CSS name / selector clashes, and to ensure that the styles are correctly scoped as expected..
+
+
+
+
 
 ```tsx {4-8} title="src/components/MyComponent/MyComponent.tsx"
 import { component$, useStylesScoped$ } from '@builder.io/qwik';