Using this.template.querySelectorAll() to modify the DOM in Lightning Web Component

Question

Currently, I am stuck in a situation to modify the DOM in LWC using the querySelectorAll function.

Here the {team.item.Description__c} field having the DOM details and saved in string form into the salesforce database.

team.html

<template if:true={teamRecords} >
    <template for:each={teamRecords} for:item="team" for:index="index">
        <div class="descArea" lwc:dom="manual" key={team.item.id}> </div>
    </template>
</template>

team.js

this.teamRecords.map((item, index) => {
    this.template.querySelectorAll('.descArea').forEach(element => {
        element.innerHTML = item.item.Description__c; //Contains HTML elements
    });
})

The .descArea is a class name of a div inside a loop in LWC component and I want to change the content of the div using the querySelectorAll function.

Answer 1

It's not clear to me why you need to do this imperatively. Would the following accomplish the same thing?

<template if:true={teamRecords} >
    <template for:each={teamRecords} for:item="team" for:index="index">
        <div key={team.item.id}>
            {team.item.Description__c}
        </div>
    </template>
</template>