javascript - 如何从元素绑定(bind)数据 Web 组件

Question

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

//自定义元素是:

 <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() 方法中获取属性值，并使用模板文字变量将其注入(inject)到其 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-* 符号定义它，则可以通过其 dataset 属性访问元素属性(即:data-res="value" )

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

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