I know I cannot do:

var elements = this.template.querySelectorAll('[id^="fieldName"]')[0];
elements[0].getElementsByTagName('lightning-formatted-text')[0].setAttribute("style:", "myCSSAttribute:myCSSValue");

Does this mean then, that, I would also not be able to do something like

var elements = this.template.querySelectorAll('[id^="fieldName"]')[0];

elements.$(lightning-formatted-text')[0].setAttribute("style:", "styleattribute:value");

If that makes sense? I've been trying to see if I'm doing this syntactically wrong or if there is another way to achieve the same result??

Here is my template markup

    <lightning-record-view-form record-id={recordId} object-api-name={objectApiName}>
        <template for:each={fieldsArray} for:item='field'>
            <p key={field.index}><lightning-output-field id={field} field-name={field}></lightning-output-field></p>
    <div id="testid" class="testid">testidcontent</div>

And, I've loaded Jquery as a module like so:

import { LightningElement, api, wire } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import getDataStyleRules from '@salesforce/apex/CustomMetaDataService.getDataStyleRulesForFields';
import jQuery from '@salesforce/resourceUrl/jquery';


callAfterRenderAll() { $("#testid").attr("style", "background-color:green");$("#testid").attr("style", "background-color:green"); }

  • 2
    Unless you have a specific reason to, you should be able to achieve everything without using JQuery Apr 8, 2019 at 13:05
  • Perhaps, I get a list of fields with the styles to be applied like so: {"data":{"fieldName__c":["color: black"],"otherFieldName__c":["color: blue"]}} but I can't think how I can , apply this style. such that the text of the output-field only is changed. I also can't really seen to say for each fieldName in data, this is the out[ut-field name, and the style=field's style list.
    – picklenic
    Apr 8, 2019 at 13:39
  • ok, so by marking my question as duplicate, we are saying, there is no way to change the inner html of this lightning-output-field text programmatically?
    – picklenic
    Apr 8, 2019 at 15:32
  • And if not, with the record-view-form, would it be possible to build a custom component to display lightning-output-fields individually and then edit their DOM to change the lightning-output_outputfield text-color ? because that is all i really, want to do.
    – picklenic
    Apr 8, 2019 at 16:32


Browse other questions tagged or ask your own question.