Let us take a look at an example Web Component. Let's say we have a Web Component called <profile-info>. And the purpose of this Web Component is to show information about an employee. The information could be name, designation, ID number, profile picture, and a card background color to state whether the employee is a full-time employee, a part-time employee, or a contractor.
The HTML structure for this <profile-info> component would look something like this:
<profile-info name="John Doe" designation="Frontend Engineer - Marketing" id-number="PRC-1455" picture-src="./john-doe.png" employee-type="ft"></profile-info>
From the list of attributes, we can see that it needs a name, designation, ID number, picture ...
