From 70f673bd12b33915cefa63a385cf64c000fb7d42 Mon Sep 17 00:00:00 2001
From: Matt Rosenquist <mrosenquist@atlassian.com>
Date: Thu, 28 Nov 2024 10:59:50 +1100
Subject: [PATCH] Update server-side-rendering to include style[data-cmpld]

**Changes**
 - Update examples to include `data-cmpld=true` as this may help readers deal with edge cases.
 - Add an additional selector to the Selector workarounds
---
 .../docs/src/pages/server-side-rendering.mdx        | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/website/packages/docs/src/pages/server-side-rendering.mdx b/website/packages/docs/src/pages/server-side-rendering.mdx
index 312b7c981..4c9a96121 100644
--- a/website/packages/docs/src/pages/server-side-rendering.mdx
+++ b/website/packages/docs/src/pages/server-side-rendering.mdx
@@ -19,9 +19,9 @@ like so:
 
 <!-- prettier-ignore -->
 ```html
-<style>._k48pni7l{font-weight:600}</style>
+<style data-cmpld=true>._k48pni7l{font-weight:600}</style>
 <div class="_k48pni7l">
-  <style>._syaz18rw{color:#ff5630}</style>
+  <style data-cmpld=true>._syaz18rw{color:#ff5630}</style>
   <div class="_syaz18rw">hello world</div>
 </div>
 ```
@@ -40,9 +40,9 @@ resulting in less styles rendered initially:
 
 <!-- prettier-ignore -->
 ```html
-<style>._k48pni7l{margin-top:24px}</style>
+<style data-cmpld=true>._k48pni7l{margin-top:24px}</style>
 <div class="_k48pni7l">
-  <style>._syaz18rw{color:#ff5630}</style>
+  <style data-cmpld=true>._syaz18rw{color:#ff5630}</style>
   <div class="_k48pni7l _syaz18rw">hello world</div>
   <div class="_k48pni7l _syaz18rw">hello world</div>
   <div class="_k48pni7l _syaz18rw">hello world</div>
@@ -83,7 +83,10 @@ Here we target the `:first-child` element.
 But the text isn't red before the JavaScript has executed!
 
 To workaround this we can use a different selector,
-either `:first-of-type` or explicitly marking the first child with a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).
+by using one of the following:
+ - `:first-of-type`
+ - explicitly marking the first child with a [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes)
+ - explicitly excluding the inline `style` elements with `:not(style[data-cmpld])`
 
 ```jsx
 <div css={{