Declarative use of ESM CDN

JSON Data passed via HTML attribute into context variable of and populating the variable into combobox.

by suns2015

HTML

<p>JSON Data passed via HTML attribute into context variable of  and populating the variable into combobox.</p> 
    <dom-bind><template>
    <iron-ajax url='data:text/json;charset=utf-8,
                    [{"label": "Hydrogen", "value": "H"}
                    ,{"label": "Oxygen"  , "value": "O"}
                    ,{"label": "Carbon"  , "value": "C"}
                    ]'
               last-response="{{lifeElements}}" auto handle-as="json"></iron-ajax>
    <vaadin-combo-box id="cbDemo"
            label="Label, value:[[cbDemoValue]]"
            placeholder="Placeholder"
            items="[[lifeElements]]"
            value="{{ cbDemoValue }}"
    >
        <template>
            [[index]]: [[item.label]] <b>[[item.value]]</b>
        </template>
    </vaadin-combo-box>
    <vaadin-combo-box label="Disabled" disabled value="H" items="[[lifeElements]]"></vaadin-combo-box>
    <vaadin-combo-box label="Read-only" readonly value="O" items="[[lifeElements]]"></vaadin-combo-box>   



    <web-elemens-loader selection="
    @polymer/iron-ajax,
    @vaadin/vaadin-element-mixin/vaadin-element-mixin,
    @vaadin/vaadin-combo-box,
    "></web-elemens-loader>
    </template></dom-bind>
    <script src="https://cdn.xml4jquery.com/web-elements-loader/build/esm-unbundled/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script><script type="module" src="https://cdn.xml4jquery.com/web-elements-loader/build/esm-unbundled/src/web-elemens-loader.js"></script>

JavaScript

/*
There is no need for JS:
- Dependencies are loaded by web-elemens-loader.
- data converted from HTML attribute string to contect variable by iron-ajax
- vaadin-combo-box uses the context variable to fill out itself
- another context variable is produced by vaadin-combo-box selection.
*/