Should I avoid adding arbitrary fields to HTML elements?

I tested adding arbitrary fields to HTML elements in JavaScript and it worked as expected:

const element = document.getElementById('element-id');
element.greet = (message) => { alert(message); };
element.message = 'Hello, world!';
element.greet(element.message);

The alert shows up with the message, but I’m concerned:

1. Do all the major browsers support this behavior?
2. Is there a pattern for choosing new field name to make sure it won’t conflict with names that the browsers use as fields for the elements?
3. Is there any reason I should avoid adding arbitrary fields to HTML elements?