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()方法中获取属性值，并使用模板文字变量将其注入到其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>

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

1 个答案: