Web-Components

Web components are a set of standards that allow you to assemble described, reusable “widgets” with unique styles and scripts in the configuration of your own tags. Standards evolve and are linked into web components quite - in precept, you can use each of the technologies used. But together they are as effective as possible.

Usually, all four standards — Custom Elements, Shadow DOM, Templates (HTML Templates), and HTML Imports — are treated, and then merged together. Since they are useful, we will consider all the possibilities of standards, adding them to the already deliberate earlier.
It is quality recalling that web components are quite young technology, and the standards have undergone many changes. For us, this is expressed in several versions of the Custom Elements and Shadow DOM standards - v0 and v1. v0 is currently not relevant. We will only consider v1. Be careful when searching for more materials! Versions v1 were formed only in 2016, which means that all articles and videos until 2016 are guaranteed to converse about the old version of the specification.

Register custom item

Of course, we can “create” our own tags (for example, browsers will grip the <noname> </ noname> tag), but in the DOM tree the component is registered as an object of the HTMLUnknownElement class and has no default behavior.
The specification of custom elements allows you to register new tags and place their behavior by the life cycle - creating, inserting into the DOM, changing attributes, deleting from the DOM. To prevent possible conflict of new HTML standard tags and custom tags, the names of the latter must contain at least one hyphen - for example, <custom-tag> </ custom-tag> or <my-awesome-tag> </ my-awesome- tag>. Also, custom tags currently cannot be self-closing, even tags without content must be paired.
Since the best way of training is practice, we will write an element that is similar in functionality to the <summary> element. Let's call it <x-spoiler>.
When you add such an element to a DOM tree, it will also become an object of the HTMLUnknownElement class. To register an item as a custom, and add its own behavior to it, you need to use the define method of the global customElements object. The first argument is the name of the tag, the second is the class that describes the behavior. The class must extend the class.
HTMLElement, so that our element has all the qualities and capabilities of other HTML elements.
After that, the browser will recreate all the x-spoiler tags in the markup as objects of the XSpoiler class, and not HTMLUnknownElement. All new x-spoiler tags that are added to the document via innerHTML, insertAdjacentHTML, append or other methods for working with HTML are created based on the XSpoiler class. You can also create such DOM elements through document.createElement.
If you try to register an item with an already registered name or based on an already registered class, we will get an exclusion.
The tag name and class name do not have to be the same. So, we can, if necessary, register two custom elements with the same class name under different tags.
Now the user element is, of course, registered, but it does nothing useful. To liven up our custom item, consider its life cycle.

Extend custom items

We can come into from the custom element class to make new custom elements based on existing ones. For example, we can enlarge our spoiler and add some functionality to it, if necessary. It is important to remember to call the same method of the parent class via super.methodName (), if necessary (in the case of the constructor and super () this is mandatory).

Expansion of standard elements

The specification also allows extensions to standard HTML tags. For example, you need your own implementation of the button, but at the same time, you want to keep the existing functionality of the browser buttons, for example, to work with the attributes crippled, tabindex, type, and others. But, there are some features.
First, when declaring a class, you need to extend the class of the tag you need. In the case of a button, this will be the HTMLButtonElement class. A complete list of classes can be found in the specification.
When registering an item with the third parameter, you must pass an object of options, which indicates which tag you want to expand (the same class can correspond to several tags). Such a custom element is created as a regular tag that needs to be expanded, but with an is attribute equal to the name of the custom element. If the element is created through document.createElement, is passed as a property of the second argument.

Styling elements before registration

In the meantime, how the user gets the HTML markup, and how the JavaScript code will be downloaded and executed, it will take some interval. To somehow stylize custom elements that are drawn in the DOM but not yet registered and not working, you can use the pseudo-class: defined.

Total

We made a reusable web component based on custom element technology. But, he has many drawbacks. So, for example, we do not have isolation of styles: the rule section {show: block! Important} will break the logic of our component. And in general, hanging styles in JS is a bad tone. It is also difficult to change the contents of the spoiler: our button, section and clicks handler will disappear when installing new content via innerHTML. To change the content, you will need to know and take into account the structure of the component. And also the markup is stored right here in the constructor. All this is not what we want from a simple reusable component. To fix all these disadvantages, we will use other specifications.