The main aim of the shadow tree is encapsulating the component’s internal implementation details. The events occurring inside the shadow DOM take the host element as the target once caught out of the component. Here is an example: Once you click the button, the following messages will be shown: Event targeting is а very practical technique to have, as…

Shadow DOM encompasses both <link rel=”stylesheet” href=”…”> and <style>. For the first case, the style sheets are HTTP-cached. Hence, they can’t be re-downloaded for multiple components that apply similar templates. The primary rule is that local styles can operate only within the shadow tree. But, the document styles work out of that tree. Of course, there can be exceptions…

Different types of components like menus, tabs, image galleries, and more, need the content for rendering. The <custom-tabs> might wait for the actual tab content to be passed like the <select> expects the <option> items. The code implementing the <custom-menu> is as follows: Then the component above should render it adequately. But it’s essential to know how to perform it. It is possible…

In this chapter, we cover a built-in template element, serving as a storage for HTML markup templates. Its contents are ignored by the browser. It only checks for syntax validity. However, it can be accessed and used in JavaScript for creating other elements. Now, let’s see what is so unique about the <template>. First and foremost, any valid…

In this chapter, we are going to cover the main means of encapsulation: Shadow DOM. With it, a component can have its “shadow” DOM tree, which may be accidentally accessed from the core document, can obtain local style rules, and so on. Built-in Shadow DOM The browser applies DOM/CSS for creating complex browser controls. The DOM structure…

Custom HTML elements can be created by a class with its properties and methods, events, and more. When a custom element is specified, it can be used in parallel with built-in HTML elements. Two kinds of custom elements can be distinguished: We will start at discovering the autonomous custom elements. For generating a custom element, it’s necessary to…

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…