From 95bb639b1510c3ee05dbfb46f3b3bd07f6661c03 Mon Sep 17 00:00:00 2001
From: oneminch <27751688+oneminch@users.noreply.github.com>
Date: Mon, 4 May 2026 15:23:12 -0400
Subject: [PATCH 1/2] docs: clarify indentation when using components

---
 README.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/README.md b/README.md
index 0a28c6a3..a0cd12ad 100644
--- a/README.md
+++ b/README.md
@@ -124,6 +124,56 @@ It is the default behavior of markdown to wrap every text inside a paragraph. MD
 </template>
 ```
 
+### Slots in MDC components
+
+When using your own components in Markdown (`::my-component ... ::`), **indentation inside the container matters**. 
+
+For the renderer to work as expected, it's important that the indentation of the content nested *within* `::my-component ... ::` aligns with the indentation of the `::my-component` line itself.
+
+Consider the following component with a named slot: 
+
+```html [Alert.vue]
+<template>
+  <div class="alert">
+    <slot name="slot1"><slot />
+  </div>
+</template>
+```
+
+#### ✅ Indenting the whole container block is OK
+
+Both these work fine (in either default or named slots):
+
+```md [markdown.md]
+::alert
+#slot1
+slot-content
+::
+```
+
+```md [markdown.md]
+  ::alert
+  #slot1
+  slot-content
+  ::
+```
+
+#### ⚠️ But indenting *within* the container can break things
+
+In particular, **slot markers (for named slots) must not be indented relative to the `::my-component` line**. If the `#slotName` line (or its content) is further indented, MDC may fail to detect the slot and the content won’t render as expected:
+
+```md [markdown.md]
+::alert
+  #slot1
+  slot-content
+::
+```
+
+> [!note]
+> When using default (unnamed) slots, content can still render, but if indented it may be parsed as a code block and end up wrapped in a `<pre>`.
+
+It's recommended to keep `#slotName` and slot content aligned with the opening `::my-component` line (no extra indentation inside the container).
+
 ### Prose Components
 
 Prose components are a list of components that will be rendered instead of regular HTML tags. For example, instead of rendering a `<p>` tag, `@nuxtjs/mdc` renders a `<ProseP>` component. This is useful when you want to add extra features to your markdown files. For example, you can add a `copy` button to your code blocks.

From e84f1a56c5abcc3436d32e64435a636b458dac8f Mon Sep 17 00:00:00 2001
From: oneminch <27751688+oneminch@users.noreply.github.com>
Date: Mon, 4 May 2026 15:51:49 -0400
Subject: [PATCH 2/2] fix: vue markup example typo and github callout casing

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a0cd12ad..11d7379b 100644
--- a/README.md
+++ b/README.md
@@ -135,7 +135,7 @@ Consider the following component with a named slot:
 ```html [Alert.vue]
 <template>
   <div class="alert">
-    <slot name="slot1"><slot />
+    <slot name="slot1"></slot>
   </div>
 </template>
 ```
@@ -169,7 +169,7 @@ In particular, **slot markers (for named slots) must not be indented relative to
 ::
 ```
 
-> [!note]
+> [!NOTE]
 > When using default (unnamed) slots, content can still render, but if indented it may be parsed as a code block and end up wrapped in a `<pre>`.
 
 It's recommended to keep `#slotName` and slot content aligned with the opening `::my-component` line (no extra indentation inside the container).