[TwigComponent][LiveComponent] Add Embedded Live Components doc

Author: sneakyvv

src/LiveComponent/doc/index.rst

@@ -2453,6 +2453,40 @@ The parent-child system is *smart*. And with a few tricks
 (:ref:`such as the key prop for lists of embedded components <rendering-quirks-with-list-of-embedded-components>`),
 you can make it behave exactly like you need.
 
+.. _passing-blocks:
+
+Passing Blocks to Components
+----------------------------
+
+Passing blocks to Live components works completely the same way you would `pass blocks for Twig Components`_. Except...
+
+When re-rendering a Live component, only the template for thàt component is rendered. The blocks defined in the
+"parent" template are grabbed via the smart Twig templating system, but the context from the parent template is *NOT*
+available during re-rendering. So, keep in mind to not refer to any outer context variables within blocks of a live component.
+
+This won't work:
+
+.. code-block:: twig
+
+    {# templates/some_page.html.twig #}
+    {% set message = 'Outer context only works on first render' %}
+
+    {% component Alert %}
+        {% block content %}{{ message }}{% endblock %}
+    {% endcomponent %}
+
+Local variables do remain available:
+
+.. code-block:: twig
+
+    {# templates/some_page.html.twig #}
+    {% component Alert %}
+        {% block content %}
+            {% set message = 'this works during re-rendering!' %}
+            {{ message }}
+        {% endblock %}
+    {% endcomponent %}
+
 .. _child-component-independent-rerender:
 
 Each component re-renders independent of one another
@@ -3127,3 +3161,4 @@ bound to Symfony's BC policy for the moment.
 .. _`the traditional collection type`: https://symfony.com/doc/current/form/form_themes.html#fragment-naming-for-collections
 .. _`How to Work with Form Themes`: https://symfony.com/doc/current/form/form_themes.html
 .. _`Symfony's built-in form theming techniques`: https://symfony.com/doc/current/form/form_themes.html
+.. _`pass blocks for Twig Components`: https://symfony.com/bundles/ux-twig-component/current/index.html#passing-blocks

src/TwigComponent/doc/index.rst

@@ -830,9 +830,11 @@ The ``with`` data is what's mounted on the component object.
         {% endblock %}
     {% endcomponent %}
 
-.. note::
+.. versionadded:: 2.11
 
-    The ``{% component %}`` syntax *cannot* currently be used with LiveComponents.
+    The ``{% component %}`` syntax can also be used with LiveComponents since 2.11.
+    However, there are some caveats related to the context between parent and child
+    components during re-rending. Read `Passing Blocks to Live Components`_.
 
 Inheritance & Forwarding "Outer Blocks"
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -1121,5 +1123,6 @@ https://symfony.com/doc/current/contributing/code/bc.html
 .. _`live component`: https://symfony.com/bundles/ux-live-component/current/index.html
 .. _`Vue`: https://v3.vuejs.org/guide/computed.html
 .. _`Live Nested Components`: https://symfony.com/bundles/ux-live-component/current/index.html#nested-components
+.. _`Passing Blocks to Live Components`: https://symfony.com/bundles/ux-live-component/current/index.html#passing-blocks
 .. _`embed tag`: https://twig.symfony.com/doc/3.x/tags/embed.html
 .. _`Stimulus controller`: https://symfony.com/bundles/StimulusBundle/current/index.html