I mean HTML Element!

mce is a collection of ready-to-go elements with better look-and-feel, minimal implementation of, Custom Element, W3C standard.

For the past few years as a front end engineer, I’ve implemented several UI components for myself and others; three maps, an autocomplete, two date-time picker, and many more. You can see those at my github website. Although I tried to design better and many people liked it, I can’t say it’s the best for all users because I found myself implementing the same feature again and again for different frameworks; React, AngularJS 1, 2, or VueJS.

It made me thinking why. As you might have guessed already, I have been chasing frameworks. I have to admit that I paid less attention to HTML itself, which is most important part of web world.

How `mce` is different

Standard committee and browsers already provided an excellent tool for structuring web applications. It’s called HTML. It’s portable and easy to work with. However the existing HTML element is not designed to be extended to your own needs.

Fortunately, with Custom Element as a living standard, you are ready to build your own element. The following is benefit of using Custom Element that I have found.

No Dependancy. Requires no library or framework to get started. Vanilla JS/HTML!

Requires no library or framework to get started. Vanilla JS/HTML! Instance On Element. Properties and methods of an element are defined with an element, not in a JS object.

Properties and methods of an element are defined with an element, not in a JS object. Built-in DOM Change Monitoring. Synchronous reaction to attribute and children DOM changes

Although Custom Element gives you lots of advantage over using a framework or library to define your own component; web standard, no dependancy, instance on element, and attribute change monitoring, I am going to focus on one thing on this article; instance on element, i.e, “your object is your element.”

No Custom Properties Are Not on DOM Element, So Far…

It has been strongly recommended not to set your own properties on DOM element because an HTML Element is not designed to be used as a custom object and it may not behave the way you think when you inject with properties and functions.

Thus, it is recommended to store properties and functions to a separate Javascript object and referencing them.

Custom Element allows you to set properties and functions on HTML element

Let’s say I want to show a dog on a web browser and let it walk or stop. I know this is not a practical example, but the concept applies the same.

So far, to make this concept to work, we have used service, object, or a class to separate DOM and the functionality that we wanted to implement. A framework(Angular, React, or any) has been a big help for this purpose.

With Custom Element, a DOM object, an element, can have its own functionalities and it’s recommended.

The following code is the simple implementation of this dog example.

From the above example, walk() and stop() are functions of <a-dog element and they are also functions of an Dog class. Actually the element constructor is the Dog , not HTMLElement. We don’t have to make an effort to set a separate object and synchronize the object to the element.

Open the example, and try the following in the console.

$0 // <a-dog></a-dog>

$0.constructor.name // “Dog”

$0.walk()

$0.stop()

Digging into a different case, let’s say that you want to show google map on the browser. It sounds simple, but implementation of this has not been easy; attributes, properties, element, Google maps API, and etc, although what we want is just to have an element that represents a google map.

With the custom element, it gets really simple. <a-google-map> represents Google Map instance, period. Tada~~, no more Angular, React, library, framework, or any, and it can be used by any library or framework because it is an HTML element representing a Google map.

With the above example, we can see that map is directly linked to the element.

> $0.constructor.name

> “GoogleMap”

> $0.map

> sg {gm_bindings_: {…}, __gm: Kf, center: _.F, zoom: 8, …}

> $0.map.setZoom(5)

Let’s go further. Now, we want markers on the map by adding or removing an element, <a-marker> .

https://plnkr.co/edit/ehresE?p=preview

Please open the plunker example and try these.

Inspect the element tag <a-marker> to set $0 Ctrl-c to copy the element Delete <a-marker> , and see the marker is removed Paste <a-marker> , and see the marker is added back

The code is also really simple.

I have to admit that I am not a good writer. In my heart, I feel the strong simplicity of huge possibility of good engineering, but I also think that I am not passing my thoughts well to you.

Instead of good writing, I have developed 23 elements to show how custom elements look like. I have also created a small polyfill for some browsers which does not support custom elements yet.

https://mymce.github.io

All codes are also available through github. I would appreciate if you leave your thoughts at the issues.

Next;

Cheers and happy coding,

Allen Kim