From fe0f19a1e0750c12352e908e39bccda474cef98c Mon Sep 17 00:00:00 2001
From: Shane-Donlon <130906067+Shane-Donlon@users.noreply.github.com>
Date: Wed, 15 Jan 2025 13:25:05 +0000
Subject: [PATCH] docs: clarify use of emojis in useStylesScoped$

---
 .../docs/src/routes/docs/(qwik)/components/styles/index.mdx  | 5 +++++
 1 file changed, 5 insertions(+)

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';