如何从元素绑定数据 Web 组件

Question

如何将数据输出到我的 Web 组件元素中的 attr 值？就像 angularjs

中的 ngmodel

// 自定义元素是：

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

Answer 1

CSS 仅

您可以使用 attr() CSS 函数结合 ::after CSS 伪 class 及其 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>

使用数据-*标准表示法

如果使用 data-* 符号定义元素属性（即 data-res="value" ）

，则可以通过其 dataset 属性访问元素属性

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

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

如何从元素绑定数据 Web 组件

how to binding data web component from element

javascript

web-component

ecmascript-6