remove props from the attribute in the PropsNode

src/TwigComponent/src/ComponentAttributes.php

@@ -37,6 +37,10 @@ public function __toString(): string
             function (string $carry, string $key) {
                 $value = $this->attributes[$key];
 
+                if (!\is_scalar($value) && null !== $value) {
+                    throw new \LogicException(sprintf('A "%s" prop was passed when creating the component. No matching %s property or mount() argument was found, so we attempted to use this as an HTML attribute. But, the value is not a scalar (it\'s a %s). Did you mean to pass this to your component or is there a typo on its name?', $key, $key, get_debug_type($value)));
+                }
+
                 if (null === $value) {
                     trigger_deprecation('symfony/ux-twig-component', '2.8.0', 'Passing "null" as an attribute value is deprecated and will throw an exception in 3.0.');
                     $value = true;
@@ -146,4 +150,9 @@ public function add($stimulusDto): self
         // add the remaining attributes for values/classes
         return $clone->defaults($controllersAttributes);
     }
+
+    public function remove($key): void
+    {
+        unset($this->attributes[$key]);
+    }
 }

src/TwigComponent/src/Twig/PropsNode.php

@@ -31,6 +31,7 @@ public function compile(Compiler $compiler): void
         foreach ($this->getAttribute('names') as $name) {
             $compiler
                 ->addDebugInfo($this)
+                ->write('$context[\'attributes\']->remove(\''.$name.'\');')
                 ->write('if (!isset($context[\''.$name.'\'])) {')
             ;
 

src/TwigComponent/tests/Fixtures/templates/components/UserCard.html.twig

@@ -1,4 +1,6 @@
-<div class='user-card'>
+{% props user %}
+
+<div {{ attributes }} class='user-card'>
     <p>{{ user.name }}</p>
     <p>{{ user.email }}</p>
 </div>