Move some contents to a caution admonition

Author: javiereguiluz

src/LiveComponent/doc/index.rst

@@ -929,7 +929,7 @@ a class:
     <div data-loading="removeClass(opacity-50)">...</div>
 
     <!-- add multiple classes when loading -->
-    <div data-loading="addClass(opacity-50 disabled)">...</div>
+    <div data-loading="addClass(opacity-50 text-muted)">...</div>
 
 Sometimes you may want to add or remove an HTML attribute when loading. That
 can be accomplished with ``addAttribute`` or ``removeAttribute``:
@@ -939,8 +939,11 @@ can be accomplished with ``addAttribute`` or ``removeAttribute``:
     <!-- add the "disabled" attribute when loading -->
     <div data-loading="addAttribute(disabled)">...</div>
 
-    <!-- add an attribute and its value -->
-    <div data-loading="addAttribute(style='color: red')">...</div>
+.. caution::
+
+    The ``addAttribute()`` and ``removeAttribute()`` functions only work with
+    empty HTML attributes (``disabled``, ``readonly``, ``required``, etc.) and
+    not with attributes that define their values (e.g. this won't work: ``addAttribute(style='color: red')``).
 
 You can also combine any number of directives by separating them with a
 space: