how to binding data web component from element

Question

How I can output data to attr value in my web component element? like ngmodel in angularjs

// custom element is :

 <custom-ele  res="value"></custom-ele>

Answer 1

CSS only

You could use the attr() CSS function combined with the ::after CSS pseudo-class and its content CSS property.

custom-ele::after { content: attr(res) }

<custom-ele  res="value"></custom-ele>

Custom Element definition

You can get the attribute value in the connectedCallback() method and inject it in its DOM tree with a template literal variable:

customElements.define( 'custom-ele', class extends HTMLElement {
    connectedCallback() {
      var res = this.getAttribute( 'res' )
      this.innerHTML = `${res}`
    }
} )

<custom-ele  res="value"></custom-ele>

Using the data-* standard notation

You could access an element attribute by its dataset property if you define it using the data-* notation (i.e.: data-res="value" )

customElements.define( 'custom-ele', class extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `${this.dataset.res}`
        }
    } )

<custom-ele data-res="value"></custom-ele>