Polymer + Vaadin button click problem

Flow
1

Hi boys…
I need your help…
I’m newbie with web components, and i have created with success a polymer app with vaadin web components.
But, if i want to bind an event, like a click in a button, nothing is fired…
For example, this is my view2.js page


import { html } from 'lit-element';
import { PageViewElement } from './page-view-element.js';

import '@vaadin/vaadin-button/vaadin-button.js';
import '@vaadin/vaadin-combo-box/vaadin-combo-box.js';


import { SharedStyles } from './shared-styles.js';

class MyView2 extends (PageViewElement) {
  static get properties() {
    return {
      // This is the data from the store.
      _clicks: { type: Number },
      _value: { type: Number }
    };
  }

  static get styles() {
    return [
      SharedStyles
    ];
  }

  render() {
    return html`<vaadin-button>Button</vaadin-button>
    clicked <span>0</span> times.
    <script>
    document.querySelector('vaadin-button').addEventListener('click', () => alert('Hello World!'));

    </script>`;
    }
   
}

window.customElements.define('my-view2', MyView2);

Can anyone help me?
Thanks

2

Hi!

The html returned by the render function is rendered inside your component’s shadow DOM. This content is isolated from the document scope, so document.querySelector doesn’t find the elements inside the component.

To query the internals of the shadow DOM, you can use this.shadowRoot.querySelector.

It’s also a bit unconventional to add <script> tags inside the shadow DOM. Here you can see an example of how to conveniently use click listeners with LitElement: https://stackblitz.com/edit/open-wc-lit-demos?file=01-basic%2F06-handle-events.js

This is a good source of examples for other LitElement features as well: https://open-wc-lit-demos.stackblitz.io/basic.
Click on the header to see the source code of each example.

I hope this will get you started!

3

Pekka Maanpää:

Thanks for your reply :slight_smile:
I understand how everything works with Lit-element but i want to work with Vaadin elements…
Do you have some example of Polymer + Vaadin listeners? (or, if you can, you can modify my example code)
Thanks.

4

Sorry, I’m a bit confused because you are talking about Polymer, but your example view seems to be written as LitElement.

Anyway, starting from your code:

document.querySelector('vaadin-button').addEventListener('click', () => alert('Hello World!'));

This works perfectly as long as the <vaadin-button> is in the light DOM. This means that it is not located inside a shadow DOM of another web component. If the <vaadin-button> was attached directly to a traditional html document, it would work. In your case, it is in the shadow DOM of <my-view2> component.

Since the button is in the shadow DOM, you need to query it from the parent component’s shadow root, like this (inside your class):

this.shadowRoot.querySelector('vaadin-button').addEventListener('click', () => alert('Hello World!'));

This works the same way with every web component, so it doesn’t matter whether you are using Lit, Polymer or something else.

5

Hi

You can also use below syntax

render() {
    return html`<vaadin-button id="myButton">Button</vaadin-button>
    clicked <span>0</span> times.
    <script>
    this.$.myButton.addEventListener('click', () => alert('Hello World!'));
    </script>`;
    }