从内联元素访问 Web 组件中的类函数

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：未定义日志

Answer 1

使用 parentElement 或最接近的()

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

在您的示例中，自定义元素是该元素的父元素<button>，因此您应该parentElement按照@Smankusors 的说明调用按钮的属性：

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

使用 getRootNode()

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

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

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>'
     }
})

具有唯一标识符

您还可以通过其id属性调用自定义元素（如果有）：

<first-component></first-component>

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>`
     }
})

使用 handleEvent()

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

<first-component></first-component>

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)
    }
})

Answer 2

那不应该是log()，但是this.log()，因为该log函数作用域只是该元素，而不是在window作用域中，所以您的代码应该是

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

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

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

this.parentElement.log()-- 编辑 -- 抱歉，我的错误，我刚刚看到您在自定义元素中添加了按钮，那么...如果您仍然想更喜欢内联，则应该是这样