как связать данные веб-компонента с элементом

Question

Как вывести данные в значение attr в элементе моего веб-компонента? как ngmodel в angularjs

// пользовательский элемент:

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

Answer 1

Только CSS

Вы можете использовать функцию attr() CSS в сочетании с псевдоклассом ::after CSS и его свойством content CSS.

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

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

Определение пользовательского элемента

Вы можете получить значение атрибута в методе connectedCallback() и добавить его в дерево DOM с помощью литеральной переменной шаблона:

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

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

Использование данных- * стандартное обозначение

Вы можете получить доступ к атрибуту элемента по его свойству dataset, если определите его с помощью нотации data- * (т.е.: data-res="value")

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

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