Web Components

In this section, we are going to discover the modern standards of web components. Some of the features are supported by the HTML/DOM standard, but most of them are still under development.

The Architecture of the Component¶

The idea of the component is widely applied in frameworks and elsewhere. The most famous rule for developing complex software is that it’s not recommended to create complex software.

Once it turns to be complex, then you should split it into simpler parts, connecting in the most evident way.

The most efficient architecture is making the complex simple.

The user interface can be split into visual components.

It includes the Top navigation, User information, Follows suggestions, Submit form, and messages.

Components encompass subcomponents. For instance, a clickable user picture can also be considered a component.

As a rule, a component is a separate visual entity, which can be described in terms of how it interacts with the page.

Any component should have:

• Its JavaScript Class
• DOM structure, handled only by its class
• CSS styles, that are applied to the component
• API: class methods, events for interacting with other components.

There are multiple development methodologies and frameworks for building components.

Built-in browser capabilities are provided by web components for that. For defining custom HTML elements are used Custom Elements. For creating an internal DOM for the component, which is concealed from others- Shadow Dom.

For declaring styles that are only used inside the component’s Shadow DOM-CSS Scoping.

Minor stuff and Event Targeting for making custom elements better suit the development.