Why Do We Need Web Components?

Web apps are created with HTML markups, CSS styles, and JavaScript code. Markups are the backbone of web apps that lay out the structure with content. HTML specification provides a set of standard built-in elements, including div, span, p, h1 to h6, section, etc. The set of built-in elements may expand in different specifications.

For example, HTML5 introduces more semantic elements like main, article, section, header, footer, etc. These built-in elements are for general purposes only and provide limited semantics. However, modern web development requires much more than those simple elements.

When developing with existing web frameworks, a typical component usually consists of the following three parts. Chapter 3 Web Components and Stencil 71

• A fragment of HTML markup for the component to operate on. The markup can contain standard HTML elements and other components developed using the same framework.

• A JavaScript object that manages the component’s internal states and interactions with end users and other components. This usually involves event handling and data bindings.

Event handlers receive the user’s actions to trigger changes of internal states and communications with the back-end server. Data bindings render the HTML markup with dynamic content retrieved from the back-end server.

Some frameworks also support bindings of HTML form elements with the component’s internal states.

• Some CSS styles for the component’s look and feel. It’s recommended for these CSS styles to be scoped in the current component to avoid unexpected conflicts and overrides with styles from other components.

A typical practice is to use a unique CSS class name for the root element of the component’s markup, and all the component’s styles are nested under this class name;


Recent Articles

How AEI Tags Are Changing the Way Freight Moves!

Using AEI tag readers can cut down on the time and money spent on shipping processes like checking in and undergoing inspections. They lessen...

Breaking News: The Latest Developments Around the World

News is a vital part of our daily lives, providing us with the latest information about events and happenings around the world. It is...

All Categories


The Private Cinemas: Anywhere and at Anytime

Imagine seeing a film in a luxury personal cinema whenever you want, simply by scheduling it on an application. If the creators of the...

Websites for TV shows download

The internet has revolutionized the way we consume television content. With the rise of streaming services, we can now watch our favorite TV shows...

More like this