From 14458bdb25efbd2b4218083673b839e1a82654c7 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sun, 27 Jun 2021 00:09:00 +0800
Subject: [PATCH] update docs for style tag in elements (#6415)

---
 site/content/docs/01-component-format.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md
index 09451701a0..c51b56fcf9 100644
--- a/site/content/docs/01-component-format.md
+++ b/site/content/docs/01-component-format.md
@@ -291,3 +291,23 @@ The `-global-` part will be removed when compiled, and the keyframe then be refe
 	@keyframes -global-my-animation-name {...}
 </style>
 ```
+
+---
+
+There should only be 1 top-level `<style>` tag per component.
+
+However, it is possible to have `<style>` tag nested inside other elements or logic blocks.
+
+In that case, the `<style>` tag will be inserted as-is into the DOM, no scoping or processing will be done on the `<style>` tag.
+
+```html
+<div>
+	<style>
+		/* this style tag will be inserted as-is */
+		div {
+			/* this will apply to all `<div>` elements in the DOM */
+			color: red;
+		}
+	</style>
+</div>
+```
\ No newline at end of file