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 ?

1 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

  • Thanks. I did not read fully, hoping its passed as $property name jiust like in wire methods with params! Commented Feb 25, 2019 at 23:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .