In the previous chapters, we looked at custom elements that use a shadow DOM for encapsulation and custom elements that do not use a shadow DOM. We will be styling our Web Component for both of these types.
Let's say, we have a Web Component called <company-header>. For the sake of simplicity, this header component needs to have an icon on the left-hand side with a circular border and this icon needs to be a link; the name of the page should be right next to the icon, and then there should be two other links on the extreme right-hand side, say home and about us.
This is how it should be used inside the index.html file:
<company-header
icon="icon.png"
page-name="My Page">
</company-header>
If you are being a little bit adventurous, I would like you to stop reading for a while and write the completed code...