UserWidget WebComponent

userwidget.element.html

<script>
class UserWidget extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }

  constructor(){
    super();
    this.attachShadow({mode:'open'});
    this.shadowRoot.innerHTML = '<div>NO NAME</div>';
  }
   
  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {
      this.shadowRoot.firstChild.innerHTML = newVal;
    }
  }
 
  get userName() {
    return this.getAttribute('name');
  }
  
  set userName(name) {
    this.setAttribute('name', name);
  }
}

customElements.define('user-widget', UserWidget);
</script>

<user-widget name="Maximilian"></user-widget>
<user-widget name="Susanne"></user-widget>
<user-widget name="Andreas"></user-widget>


<script>
function changeUserWidgetsToUpperCase(){
    var elements = document.getElementsByTagName('user-widget')
    Array.from(elements).forEach(widget => {
        widget.userName = widget.userName.toUpperCase();
    })

}
</script>

<button onClick="changeUserWidgetsToUpperCase()">to uppercase</button>