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