javascript - 从内联元素访问 Web Component 中的类函数

Question

我想从我的 Web 组件中的元素执行定义的类函数:

customElements.define('first-component', class FirstComponent extends HTMLElement {
    constructor() {
        super();
     }

     log() {
        console.log('Well Done!')
     }

     connectedCallback() {
        this.innerHTML = '<button onclick="log()">Do it</button>'
     }
});

现在状态:ReferenceError: log is not defined

Answer 1

与parentElement，或closest()

为了调用log()自定义元素的方法，您必须获取它的引用。

在您的示例中，自定义元素是 <button> 的父元素元素，所以你应该调用 parentElement @Smankusors 已经说明的按钮属性:

<button onclick="this.parentElement.log()>Do it</button>

---

使用 getRootNode()

或者，在更复杂的 DOM 树中，如果使用 Shadow DOM，您可以使用 getRootNode()结合host获取自定义元素引用。

customElements.define('first-component', class FirstComponent extends HTMLElement {
     log() {
        console.log('Well Done!')
     }

     connectedCallback() {
        this.attachShadow({mode: 'open'})
            .innerHTML = '<button onclick="this.getRootNode().host.log()">Do it</button>'
     }
})

<first-component></first-component>

---

具有唯一标识符

您还可以通过其 id 调用自定义元素属性(property)(如果有的话):

customElements.define('first-component', class FirstComponent extends HTMLElement {
     log() {
        console.log('Well Done!')
     }

     connectedCallback() {
        if (!this.id)
            this.id = "_id"
        this.innerHTML = `<button onclick="${this.id}.log()">Do it</button>`
     }
})

<first-component></first-component>

---

使用 handleEvent()

出于安全原因，您可以避免使用内联脚本并实现 handleEvent()方法，然后根据某些标准在其中调用特定方法:

customElements.define('first-component', class FirstComponent extends HTMLElement {
    log() {
        console.log('Well Done!')
    }
     
    handleEvent(ev) {
        if (ev.target.innerText == 'Do it')
            this.log()
    }

    connectedCallback() {
        this.innerHTML = '<button>Do it</button>'
        this.addEventListener('click', this)
    }
})

<first-component></first-component>