A little snippet to use ES2018 code to old school load a bunch of UI Widgets, where the HTML configures the options of the UI widget and which element is to be enhanced with a stateful UI widget

old-school.js

const uiWidgets = {
    draggable: class Draggable {
        constructor({
            element,
            options: { dropZones = [], dragUI = 'standard' } = {}
        }) {
            Object.assign(this, {
                element,
                dropZones,
                dragUI,
            });
        }
    },
    slider: class Slider {
        constructor({ element, options: { value = 0 } = {} }) {
            Object.assign(this, { element, slider: true, value });
        }
    }
}

const initUIWidgets = uiWidgets => Object.entries(uiWidgets)
    .map(([widgetName, Widget]) =>
        [...document.querySelectorAll(`[data-${widgetName}]`)]
            .map(el => {
                const widget = new Widget({
                    element: el,
                    options: el.dataset[widgetName]
                        ? JSON.parse(el.dataset[widgetName])
                        : {}
                });
                el.uiWidgets = {
                    ...el.uiWidgets,
                    [widgetName]: widget
                };
                return widget;
            })
    )

// Instatiate all widgets
initUIWidgets(uiWidgets);

/* HTML should be configured like so..
<div data-slider='{ "value": 0 }'></div>
<div data-slider='{ "value": 127 }' data-draggable='{ "dropZones": [".el-drop-target"] }'></div>
<div data-slider='{ "value": 255 }'></div>
*/