Function v-bind() in CSS

SFC <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;" tabindex="0"><code><span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">script</span><span style="color:#B392F0"> setup</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> theme</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#E1E4E8"> color: </span><span style="color:#9ECBFF">'red'</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">script</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">template</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8"> &#x3C;</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">>hello&#x3C;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">template</span><span style="color:#E1E4E8">></span></span> <span class="line"></span> <span class="line"><span style="color:#E1E4E8">&#x3C;</span><span style="color:#85E89D">style</span><span style="color:#B392F0"> scoped</span><span style="color:#E1E4E8">></span></span> <span class="line"><span style="color:#85E89D">p</span><span style="color:#E1E4E8"> {</span></span> <span class="line"><span style="color:#79B8FF"> color</span><span style="color:#E1E4E8">: </span><span style="color:#B392F0">v-bind</span><span style="color:#E1E4E8">('theme.color');</span></span> <span class="line"><span style="color:#E1E4E8">}</span></span> <span class="line"><span style="color:#E1E4E8">&#x3C;/</span><span style="color:#85E89D">style</span><span style="color:#E1E4E8">></span></span></code></pre>

The actual value will be compiled into a hashed
CSS custom property, so the CSS is still static.
The custom property will be applied to the
component’s root element via inline styles and
reactively updated if the source value changes.