This is a demo of an "Person Name component". Element has three custom attributes -- "given", "family" and "format". If "format" is set to "sort" then the name will be render "family", "given" order, otherwise it is render "given" "family" order. The custom component needs to pull the values of the custom elements and then render the "testContent" of the enclosed element.
Display format:
Sort format:
HTML Usage:
<p>Display format: <person-name-component given="R. S." family="Doiel" format="display"></person-name-component></p>
<p>Sort format: <person-name-component given="R. S." family="Doiel" format="sort"></person-name-component></p>
JavaScript Module person name component