Вот тут
cleverDiv.style.color = 'red';
Вы не присваиваете в свойство style, а берете его.
Значит нужен обработчик get
Свойства объектов DOM это не просто строки или числа. Они реализованы через внутренние гетеры и сетеры. Поэтому для них не всегда срабатывает правило, что если обработчик не задан, то просто берется свойство объекта.
<!DOCTYPE html>
<html>
<head>
<script>
function watchObj(node, callback){
return new Proxy(node, {
set (target, name, value){
target[name] = value;
callback(name, value);
return true;
},
get(target, name) {
if (!(name in target)) {
return undefined;
}
const value = target[name];
return typeof value == "function"
? (...args) => value.apply(target, args)
: value;
}
});
}
document.addEventListener('DOMContentLoaded', () => {
let div = document.createElement('div');
document.body.appendChild(div);
let cleverDiv = watchObj(div, function(prop, val){
console.log(prop, val);
});
cleverDiv.innerHTML = '<strong>HTML</strong><em>Changed</em>';
cleverDiv.style.color = 'red';
let span = document.createElement('span');
span.textContent = ' appended';
cleverDiv.appendChild(span);
})
</script>
</head>
<body>
</body>
</html>