Diving into Web Components
With the rise of JavaScript frameworks and the increased importance of client-side rendering, Web Components have been proposed and standardized. The term web component is used as an umbrella expression for a set of features that try to provide a standard component model for the web.
In the following sections, we'll try to understand the most important features that actually form Web Components and how Web Components can help us to isolate styles.
Understanding Web Components
As you know already, Web Components provide the ability to use custom elements in HTML documents. These could look as simple as the following snippet:
<product-page id="app"></product-page>
While custom elements cannot be changed from the HTML parsing perspective, they can be fully configured in terms of behavior and appearance. For instance, custom elements cannot be self-closed like <img>
or <meta>
tags. To add some custom appearance...