From fb123dd7a46c69d6de1b159c91adaba42bf960d5 Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Sat, 15 Aug 2020 22:01:20 +0700
Subject: [PATCH] Document styling elements inside html expressions

---
 site/content/docs/02-template-syntax.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index 6d0847eb41..a69acb1c03 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -364,6 +364,22 @@ The expression should be valid standalone HTML — `{@html "<div>"}content{@html
 </div>
 ```
 
+---
+
+By default, CSS is locally scoped to the component and Svelte won't target elements inside `{@html expression}` because it doesn't know which elements are going to appear, any unused styles are dead-code-eliminated. To target elements inside the expression, we can use the `:global(...)` modifier, but it will break the CSS scope if the expression is placed at the root level of the component. To mitigate this, we can wrap the expression inside a locally defined element and use the modifier as the descendant of the element.
+
+```sv
+<div class="content">
+	{@html post.content}
+</div>
+
+<style>
+	.content :global(p) {
+		line-height: 1.5;
+	}
+</style>
+```
+
 
 ### {@debug ...}