docs: fix style directive with important modifier example (#8802)

Author: cesarnml

documentation/docs/02-template-syntax/05-element-directives.md

@@ -381,7 +381,7 @@ The `style:` directive provides a shorthand for setting multiple styles on an el
 <div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>
 
 <!-- Styles can be marked as important -->
-<div style:color="red">...</div>
+<div style:color|important="red">...</div>
 ```
 
 When `style:` directives are combined with `style` attributes, the directives will take precedence: