Lit-element checkbox not updated after reset - web-component

Question

I'm new with Lit-element and I'm trying to modify an exsiting library. This library creates a table of checkboxes based on three arrays. Arrays AAA and BBB are used as indexes, and array CCC is used to set the "checked" property.
These arrays can be realoaded via ajax, so the initial data is reset.
The problem is, if I manually check/uncheck one checkbox an reset the data, the checkbox is not updated and the manual changes persist.
I've tried to add all three arrays to the "properties" section. Also I've created getters and setters. And finally I've tried to do a full requestUpdate", but nothing works.
Here is a piece of code (EDITED: replaced ?checked by .checked):
render(){
return html`
...
${this.AAA.map(A => html`
<tr>
...
${this.BBB.map(B => html`
<td>
...
<input type="checkbox" .checked=${this.CCC[A].includes(B)} id="${A}:${B}"/>
...
</td>
`)}
</tr>
`)}
...
`
}
static get properties() {
return {
//(added by me) Same for BBB and CCC
AAA: { type: Array, hasChanged: (newVal, oldVal) => {
return true;
}},
...
};
}
//(added by me) Same for BBB and CCC
set AAA(newAAA){
const oldAAA = this.AAA;
this._AAA = newAAA;
this.requestUpdate('AAA', oldAAA);
}
get AAA(){
return this._AAA
}
Ajax Data might look like this:
{
"AAA": [
"xxx",
"yyy",
"zzz"
],
"BBB": [
"111",
"222",
"333"
]
"CCC": {
"xxx": [
"111"
],
"yyy": [
"222",
"333"
],
"zzz": [
"222"
]
}
}
Here, a little example where you can try the problem: https://stackblitz.com/edit/js-fadxme
Some advise?
Thanks.

Answer 1

I've managed to do it modifying the shadowRoot/renderRoot in the "updated" method.
Input now is declared as:
<input type="checkbox" data-aaa="${A}" data-bbb="${B}" id="${A}:${B}"/>
instead of:
<input type="checkbox" .checked=${this.CCC[A].includes(B)} id="${A}:${B}"/>
And here the updated method:
updated(changedProperties) {
var inputs = this.shadowRoot.querySelectorAll("input[type='checkbox']");
inputs.forEach(elem => {
let A = elem.getAttribute('data-aaa');
let B = elem.getAttribute('data-bbb');
if(A && B){
elem.checked = this.CCC[A] ? this.CCC[A].includes(B) : false;
}
})
super.updated(changedProperties);
}
Here the working example: https://stackblitz.com/edit/js-fadxme
Anyway... what is preferible to use, shadowRoot or renderRoot?