View on GitHub

Dom-class

Custom Elements through JS

Download this project as a .zip file Download this project as a tar.gz file

dom-class build status

Built on top of es-class, and integrating handy restyle features, DOMClass is a lightweight, cross browser, simplification of WebComponents.

How To

All es-class features are included, and the constructor will be automatically used once the component has been initialized.

var MyComponent = new DOMClass({
  constructor: function () {
    this.textContent = 'Hello World!';
  }
});

document.body.append(new MyComponent);

While by default new components will be created name-conflict free, it is possible to specify the desired node name via the name property.

var XAMe = new DOMClass({
  name: 'x-a-me',
  constructor: function () {
    console.log(this.textContent);
  }
});

// we can create via new DOMClass
// or we can use the name
document.body.innerHTML = '<x-a-me>Hello Again!</x-a-me>';

All famous and verbose CustomElement callbacks are aliased in a simpler, yet semantic, way.

var MyCE = new DOMClass({

  // equivalent of createdCallback
  // will be invoked after the component will get initialized
  // in case there are mixins or super extends
  constructor: function () {},

  // equivalent of attachedCallback
  onAttached: function () {},

  // equivalent of detachedCallback
  onDetached: function () {},

  // equivalent of attributeChangedCallback
  onChanged: function () {}

});

It is possible to style elements per Component, which will eventually also create a css property we can use to apply own specific styles.

var XSquare = new DOMClass({
  name: 'x-square',
  css: {
    // to self reference the component
    // it is also possible to use just empty selector
    // handy specially when the name is unknown
    'x-square': {
      display: 'block',
      padding: 0,
      width: 32,
      height: 32,
      border: '1px solid black'
    },
    // to reference any element within the component
    // simply use regular CSS selectors
    'span': {
      display: 'inline-block',
      width: '100%',
      lineHeight: 32,
      textAlign: 'center',
      font: {
        size: 26,
        weight: 'bold'
      }
    }
    // mediq queries, animations, and everything else
    // are also supported. Please see `restyle` documentation
  },
  // Yes! DOMClass accepts arguments too \o/
  constructor: function (text) {
    this.innerHTML = '<span>' + text + '</span>';
    // if there is a css in the prototype,
    // a fresh new restyle object will be assigned at runtime
    this.css.set({
      // empty selector, same as using 'x-square'
      // to reference itself
      '': {
        backgroundColor: 'rgb(' + [
          Math.random() * 256 | 0,
          Math.random() * 256 | 0,
          Math.random() * 256 | 0
        ].join(',') + ')'
      }
    });
  }
});

// example
document.body.append(new XSquare('!'));
document.body.append(new XSquare('A'));
document.body.append(new XSquare('Z'));

Please note there is no ShadowDOM, template, or HTMLImport polyfill, everything works with regular, well supported, HTML5 standards and on top of document.registerElement.

Compatibility

The following list of desktop browsers has been successfully tested:

The following list of mobile OS has been successfully tested:

If you'd like to know if your browser is supported please check the live test page and let me know if something is not green, thank you.

Which file for what ?

The build folder contains all variants, following explained:

What is Vitamer JS ?

Directly from Wikipedia:

Typically, the vitamin activity of multiple vitamers is due to the body's (limited) ability to convert one vitamer to another, or many vitamers to the same enzymatic cofactor(s), which is active in the body as the important form of the vitamin.

As part of the definition of vitamin, the body cannot completely synthesize an optimal amount of vitamin activity from simple foodstuffs, without some minimal amount of a vitamer molecule as a basis.

In this case it's the minimum amount of packages required in order to obtain a modern, comfortable, and cross browser environment based on latest DOM standards and proposals.

In this case, the file contains the following module:

From vanilla JS world, above package might be truly everything you need in order to create amazing apps, forgetting about cross platform issues or performance gotchas (greedy RAM or CPU operations).

Since the total package amount, once minified and gzipped, is less than 9KB, I thought Vitamer, as opposite to the well known Polymer, would have worked as file name. Let me know if you have better name ideas :-)

License

The MIT Style License

Copyright (C) 2015 by Andrea Giammarchi - @WebReflection

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.