A Person Input Web Component Example

This is a demo of an "Person Object component" containing a person's name and orcid as input elements. The custom element has what is called a "getter" and "setter" implemented using the attribute name "value". If you use .value to read the component it will return an object with the attributes set. Likewise if you have an object with the same attribute names and set the .value to an object it will update the component. This should make it easy for scripting with JavaScript. Another attribute called "as_json" returns the JSON representation.

HTML Usage:

<person-input-component given="R. S." family="Doiel" orcid="0000-0003-0900-6903"></person-input-component>

JavaScript Module person input component

Example JavaScript usage (try this in our browser's console)

let person_input = document.querySelector("person-input-component"),
    person = {};

person_input.onchange = function () {
    console.log("DEBUG updating person object");
    person = person_input.value;
};

// ... send the update to the API and fetch it back then update
// the input element using an assignment to ".value".

person_input.value = person;