如何将数据输出到我的 Web 组件元素中的 attr 值?就像 angularjs 中的 ngmodel
//自定义元素是:
<custom-ele res="value"></custom-ele>
最佳答案
仅限 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>
关于javascript - 如何从元素绑定(bind)数据 Web 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53190048/