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
<template>
<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>
</template>
</lightning-record-view-form>
{dataStyleRulesList}
<div id="testid" class="testid">testidcontent</div>
</template>
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"); }