# Custom-Elements Links: [Index](../../README.md) This module is a wrapper for `MutationObserver` API. It allows you to create custom HTML elements and continuously observe it's changes in a simple way using callback functions for each type of change. #### Flow Each new tag should have a module, that will export itself when `lazyLoadModules` will be called. - Insert into HTML new tags - For each tag load corresponding module. - Each of these modules will load `custom-elements` module and will pass callback functions. When required, this module will export an `Object` with 2 methods: ```js { registerMethods : function ( nodeName, prototypeMethods ) { ... } lazyLoadModules : function ( list ) { ... } } ``` `registerMethods` - will register callback functions for events. `lazyLoadModules` - will load modules for each new HTML tag Possible event handlers: ```js { '__onInit' : function () { ... }, '__onContentChange' : function () { ... }, '__onRemove' : function () { ... }, '__onAttrChange' : function () { ... } } ``` Example: A full example is located in examples folder. [Examples](docs/examples) Add new custom element in HTML ```HTML ... ... ``` Below in a script load corresponding module for new tag: ```js window.App = new ApplicationBuilder(); // initialize bare bone application prototype App.modulePath('../../../constructors'); // register correct modules folder App.require([ 'customElements :: custom-elements', // customElements is used as an alias (useful for long named modules) ]).then(function (customElements) { customElements.lazyLoadModules({ mycustomelement : 'elements/custom' // registering a module located in elements folder (see example) }); }); ``` In module named `custom.js` is following code: ```js App.require('custom-elements', function (customElements) { customElements.registerMethods('mycustomelement', { // first parameter should be the same as HTML tag name. __onInit : function () { // this function is called once at module initialization. }, __onContentChange : function () { // is called when nodes or content inside are changed }, __onAttrChange : function () { // is called when an attribute is changed }, __onRemove : function () { // is called when element is removed from DOM }, /** other methods or properties that will be available on node.methods().myMethod() myMethod : function () { // this. is node }, property1 : "test val", // global for all node with same tagname ... add others */ }); module.exports = {}; // nothing to export. But export is needed to signal end of module loading. }); ```