<div id="item-1">11</div>
<div id="item-2">22</div>
<script type="text/javascript">
let view = new Proxy({
selected: null,
test: null
}, {
set: function(obj, prop, newval) {
let oldval = obj[prop];
console.log(oldval)
if (prop === 'selected') {
if (oldval) {
oldval.setAttribute('aria-selected', 'false');
}
if (newval) {
newval.setAttribute('aria-selected', 'true');
}
}
// The default behavior to store the value
obj[prop] = newval;
}
});
let i1 = view.selected = document.getElementById('item-1');
i1.getAttribute('aria-selected')
let i2 = view.selected = document.getElementById('item-2');
i1.getAttribute('aria-selected')
i2.getAttribute('aria-selected')
</script>