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 ?


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! – Anshul Agrawal Feb 25 '19 at 23:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.