Vue developers can now declaratively describe in single-file component templates how component state relates to component style. The experimental Vue 3 feature relies on CSS variables, a native feature in modern browsers, that has been used to implement framework-independent design systems.

The <style> tag in Vue’s single-file component now supports a vars attribute that may bind to pieces of component state declared in the <script> section of the template. The sfc-style-variables RFC provides the following basic example:

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

In this trivial example, the color property that belongs to the component state is initially set to red. That property is bound in the style tag to be used as the text color of the component’s div content. The binding means that changes in the component’s color piece of state will be automatically reflected in the text color.

#javascript #css #vue.js #news