We have been playing around with attributes since the first chapter. And we did get a brief overview of properties and how they can work along with state management to provide a more complete Web Component.
But what is the exact difference between the two? If you are a frontend developer, you must have created a form in your career. We will be looking at an example of an <input> tag:
<input type="text" value="default value" />
If you look at it carefully, we have an attribute called value giving it some default value. So if you want to get the value of this <input> tag, you can get it by using the following code:
document.querySelector('input').getAttribute('value');
So, you are directly referencing the attribute for this <input> tag to get the value. But there is another way in which...