Native Elements concept

All good health.
I wanted to propose the concept of a JavaScript (JS) library for the convenient use of Custom Elements (in Russian I will call “my own elements”). Before offering Polymer, X-Tag, Bosonic and others, please read the text to the end.

Introduction

The main idea is to make the use of your own elements more similar to the native approach to styling embedded HTML elements. For example, I defined an element of a vertical histogram (ui-vboxhistogramm). Added a few histograms to the page. When using Polymer, I need to describe the visual style for each histogram separately. And in case of repetition of visual properties (not CSS properties, but manually defined for their own element) for each histogram, the description becomes redundant. Let me explain with an example:

<ui-vboxhistogramm id="histo1" column-count="5" column-width="10px"></ui-vboxhistogramm> <ui-vboxhistogramm id="histo2" column-count="5" column-width="10px"></ui-vboxhistogramm> <ui-vboxhistogramm id="histo3" column-count="5" column-width="10px"></ui-vboxhistogramm> 

This immediately suggests a class system from HTML. But classes only work for native CSS properties. As a result, the task arose to make a similar class system on JS.

Native Elements concept

First of all, I would like to make access to the properties of the visualization by analogy with the native style of changing these properties:

 divElement.style.background = "color"; 

Own elements allow you to realize this bold idea:

 //    ,              .           . class ExtendedStyleDeclaration { constructor(parentNode) { this._root = parentNode; } declare(declarationObject) { //                } } //  (element.xstyle.column),    class VBoxHistogrammCulumnStyle extends ExtendedStyleDeclaration { constructor(parentNode) { super(parentNode); } set count(value) { //      ,  xstyle saveProperty(this, "count", value); //       (canvas  svg,    ) } get count() { return getLastProperty(this, "count"); } set width(value){} get width() {} } //   (element.xstyle)   class VBoxHistogrammStyle extends ExtendedStyleDeclaration { constructor(parentNode) { super(parentNode); this.column = new VBoxHistogrammCulumnStyle(this); } set width(value) { //            , //       (   ()),       ,   . saveProperty(this, "width", value); //   ,      CSS-. // ,     ,    width ,      -  if(condition) { this._root.style.width = this.width; } else { this._root.style.width = "   "; } } get width() { return getLastProperty(this, "width"); } } //    class VBoxHistogrammProto extends HTMLElement { createdCallback() { setGroupsToQueue(this); //        group,          declareGroup this.xstyle = new VBoxHistogrammStyle(this); //           } } 

Now we can set the style for our elements by analogy with the native approach and / or even more advanced way:

 let histo1 = document.getElementById("histo1"); histo1.xstyle.width = "100px"; //or histo1.xstyle.declare( { width : "100px", column: { count: 5, width: "10px" } }); histo1.xstyle.column.count = 15; //        15 .      ,      .   count      (  CSS-). //or histo1.xstyle.column.declare( { count: 5, width: "10px" }); 

')

Groups - they are classes

We return to the question of styling through classes. Since the class keyword is already reserved for this attribute, the closest name for it in my opinion is the group keyword. The grouping of elements occurs by analogy with the task of the class for embedded elements:

 <ui-vboxhistogramm id="histo1" group="histogroup1"></ui-vboxhistogramm> <ui-vboxhistogramm id="histo2" group="histogroup1"></ui-vboxhistogramm> <ui-vboxhistogramm id="histo3" group="histogroup1 histogroup2"></ui-vboxhistogramm> 

Now our elements are grouped by common similar properties defined manually in their own element. The declaration of the groups occurs in the JS code:

 // declareGroup     groups,    let groups = declareGroup( { histogroup1: { width: "100px", column: { count: 5, width: "10px" } }, histogroup2:{} }); //         //  histogroup1   histo5 let histo5 = document.getElementById("histo5"); histo5.groupList.add(groups.histogroup1); //     groups   histo6 let histo6 = document.getElementById("histo6"); histo6.xstyle.declare( { group: groups }); 

The group declaration algorithm is implemented as follows. At the time of creating your own element (the callback function createdCallback ), you must organize a list of groups (for example, in the global window object) with a queue of grouped elements for use with the special groupList object.

groupList is an analogue of the native classList only for its own element. It also has add and remove methods. The add method (similar to the declare method for a single element) takes a declaration object containing a description of the visual properties of the element. Thus, the declareGroup function bypasses all groups from its declaration object and adds them to all items in the queue.

The priority of the specified properties can be implemented by analogy with the classes. If the property is set directly through the setter or the declare method, then the properties from the groups lose their power, that is, overlap.

Conclusion

To summarize The essence of the concept is to provide a set of classes (JS) and functions for implementing the behavior shown in the examples above:

• dynamic setters for specifying the style of your own element, close in mechanics to native stylization through element.style.property
• grouping elements (analogous to classes for CSS properties) of similar style, to eliminate redundancy when describing the same custom properties (for example, the number and width of the histogram columns) for several elements

As a result, we get a close to the native method of describing the visual properties for our own elements, which contains a number of advantages and disadvantages. I would like to hear the opinion of developers who know front end to determine the feasibility of implementing this approach.