Add public property to a css file

Question

I am trying to configure some custom properties in my web component. These property corresponds to css attributes like background color etc.

I am having difficulty in adding these attributes to my dom. I tried

@tagColor is my property in targetConfig

this.template.querySelectorAll('topnews-item-article-keywords').add("background", '$tagColor');

Also i tried calling a like below

<span style={headerColorToDisplay}>{top.header}&nbsp;</span>

get headerColorToDisplay () {
    return 'background:$tagColor'
}

How can we achieve this ?

Answer 1

We don't use $ to access the variable's value in Javascript. We use this keyword.

import { api, LightningElement } from 'lwc';

export default class MyColorDemo extends LightningElement {
    @api tagColor= "blue"; //This will be override from the value you pass from app builder target

    get headerColorToDisplay(){
        return "color:"+this.tagColor;
    }

}

Src: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_components_accessibility_attributes