Dynamic parts in style block of router component


#1

Is it somehow possible to add dynamic parts in a style block of a router component? Let’s say I got a page item from my API, containing:

{
  "title": "Page title",
  "content": "<p>My page content</p>",
  "title_color": "#ff0000"
}

I would like to do for example:

<template>
  <h1>{{item.title}}</h1>
  {{item.content}
</template>
<style>
  h1 {
    color: {{item.title_color}}
  }
</style>

Of course I can generate a regular style-block inside the template, but I would like to keep the styles in a seperate component part.


#2

No, it is not possible as styles should be static here, what you can do is to just use inline styles for required elements:

<template>
  <h1 style="color:{{item.title_color}}">{{item.title}}</h1>
  {{item.content}
</template>