Add docs for compound :global selector (#6271)

* Add docs for compound :global selector

Co-authored-by: Antony Jones <ant@enzy.org>

site/content/docs/01-component-format.md

@@ -277,6 +277,15 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
 			 to this component */
 		color: goldenrod;
 	}
+
+	p:global(.red) {
+		/* this will apply to all <p> elements belonging to this 
+			 component with a class of red, even if class="red" does
+			 not initially appear in the markup, and is instead 
+			 added at runtime. This is useful when the class 
+			 of the element is dynamically applied, for instance 
+			 when updating the element's classList property directly. */
+	}
 </style>
 ```