A pattern for creating vanilla web components. no library. just a pattern I am rolling around.

web-component.js

(function () {
    expose('createMyComponent', register, factory);

    /**
     * Exposes your new component to the window or to a module
     *
     * @param {string} name - the factory name to expose
     * @param {function} definition - the definition of your web component. registers to the document
     * @param {function} factory - method for programmatically creating web component
     */
    function expose(name, definition, factory) {
        var Component = definition();

        if (typeof exports === 'object') {
            if (typeof module === 'object' && typeof module.exports === 'object') {
                module.exports = exposeFactory;
            }

            exports[name] = exposeFactory;

            return exposeFactory;
        }

        this[name] = exposeFactory;

        function exposeFactory(opts) {
            return factory(Component, opts);
        }

        return exposeFactory;
    }

    /**
     * !!!This will be the only part you should have to change other then names
     * 
     * Create and register your web component with the document
     */
    function register() {
        var doProto = Object.create(HTMLElement.prototype);

        return document.registerElement('my-component', {
            prototype: doProto
        });
    }

    /**
     * factory for creating new dynamic instance of the component
     *
     * @param {function} Component - the registered component Constructor/class
     * @param {object} options - a map of attributes to attach to the new component instance
     *
     * @return {*}
     */
    function factory(Component, options) {
        var newEl = new Component();

        for(var option in options) {
            if(options.hasOwnProperty(option)) {
                newEl.setAttribute(option, options[option]);
            }
        }

        return newEl;
    }
})();