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>
1 Like
3

@nolimits4web Wondering if you are planning something like this? Still would love functionality like this. As we build branded apps, this would be a great way to easily generate a style block with whitelabel-colors etc in the main app component. Or for example style a panel with current-item-owner brand colors/settings.