Javascript-форум - Proxy объекта DOM: ошибка Illegal invocation при изменении style

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Proxy объекта DOM: ошибка Illegal invocation при изменении style (https://javascript.ru/forum/misc/79885-proxy-obekta-dom-oshibka-illegal-invocation-pri-izmenenii-style.html)

Proxy объекта DOM: ошибка Illegal invocation при изменении style

Добрый день!
Есть функция, создающая proxy:

function watchObj(node, callback){
	 return new Proxy(node, {
		 set (target, name, value){
			 target[name] = value;
			 callback(name, value); 
			 return true;
			 }
	 });
 } 
 
 
let div = document.createElement('div');
document.body.appendChild(div);

let cleverDiv = watchObj(div, function(prop, val){
console.log(prop, val);
});

При измении свойства самого объекта (innerHTML) все работает корректно:

cleverDiv.innerHTML = '<strong>HTML</strong><em>Changed</em>'; // в консоли innerHTML <strong>HTML</strong><em>Changed</em>

При измении свойства внутреннего объекта Style - ошибка:

cleverDiv.style.color = 'red'; // Uncaught TypeError: Illegal invocation

Понимаю, что теряется контекст, но не понимаю, как исправить. Помогите, пожалуйста

Вот тут
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>

Огромное спасибо!