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;