style:

La directive de style: fournit un raccourci pour définir plusieurs styles sur un élément.

<!-- ces écritures sont équivalentes -->
<div style:color="red">...</div>
<div style="color: red;">...</div>

La valeur peut contenir des expressions arbitraires :

<div style:color={myColor}>...</div>

La forme raccourcie est permise :

<div style:color>...</div>

Plusieurs styles peuvent être définis sur un même élément :

<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>

Pour définir un style comme important, vous pouvez utiliser le modificateur |important :

<div style:color|important="red">...</div>

Lorsque des directives de style: sont combinées avec des attributs style, les directives seront prioritaires, même sur les propriétés !important :

<div style="color: blue;" style:color="red">Ceci sera rouge</div>
<div style:color="red" style="color: blue !important">Ceci sera toujours rouge</div>