Attributes and properties

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 ...

Get Getting Started with Web Components now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.