using 'onclick()' leads to 'Uncaught TypeError: Illegal invocation'

[luke-m]

Describe the bug When I use the onclick() method inside the class of the component I'm building, I get 'Uncaught TypeError: Illegal invocation' when trying to run the page.

To Reproduce Steps to reproduce the behavior:

1. Create component.
2. Inside the class of the component, define: onclick() { }
3. Open the component in a browser.

Expected behavior The Click Listener of the component is registered and behaves properly.

Desktop (please complete the following information):

• OS: Win10
• Browser: Chrome
• Version: 71.0.3578.98 (Offizieller Build) (64-Bit)
  • Browser: FF
  • Version: 65.0 (64-Bit)

Additional context In FireFox, the console throws: TypeError: 'set onclick' called on an object that does not implement interface HTMLElement.

[jurekbarth]

@luke-m can you provide an example? Here we have an example implementation in progress where you can have a look at, too. #89

Is that what you want to accomplish: https://codepen.io/jurekbarth/pen/aXaQWb ?

[luke-m]

The bioElement docs contain an example that overrides an existing 'onclick()' method, which seems to be a hyperHTML functionality.

Example from the docs:

import Component from '@biotope/element';

class MyButton extends Component {

    onclick() {
        // this will set the state on click
        this.setState({
            foo: 'bar'
        });
    }

    render() {

        return this.html`
            ${this.state.foo}
        `;
    }
}

MyButton.componentName = 'my-button';

MyButton.register();

I'll try your example, but even if it works, the docs should at least be updated and or the reason for the illegal invocation error should be investigated.

[jurekbarth]

@luke-m i am not able to get that to work at all. Do you have a working example somewhere where i can see that error message? I also looked at the hyperhtml docs, but i couldn't find anything about that even though i had that in mind, that this should work.

Something like this works, too:

import Component from 'https://unpkg.com/@biotope/element@2.2.0/lib/esm/index.js';

class MyButton extends Component {

  onclick() {
    console.log('click');
    this.emit('click');
  }

  render() {
    return this.html`<button onclick=${this}>Click me</button>`;
  }
}

MyButton.componentName = 'my-button';

MyButton.register();

For now i would suggest updating the docs. @tiagomapmarques or @SheepFromHeaven any hints?