Styling Web Components

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

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.