ID not defined at HTMLElement.onclick polymer inside element

Question

When running the onclick open with a FAB, i'm able to open an dialog, as long as i run it inside the index.html. But when I've created an element, and moved the fab and dialog inside this element, I'm prompt with

CarDialog not defined at HTMLElement.onclick polymer inside element

<paper-fab icon="maps:directions-car" onclick="carDialog.open()" class="blue"></paper-fab>
    <paper-dialog no-overlap id="carDialog">
        <paper-toolbar>
            <div slot="top" class="title">Title</div>
            <paper-icon-button slot="top" icon="more-vert" on-tap="moreAction"></paper-icon-button>
        </paper-toolbar>
        <div class="car-img">
            <object type="image/svg+xml" data="img/car-large.svg">
            </object>
        </div>
    </paper-dialog>

This code works inside index.html but if I move it inside an element it stops.

<car-dialog-layout></car-dialog-layout>

Answer 1

Solved by using on-tap instead of onclick, and toggle the dialog.

on-tap="openCarDialog"
...
 openCarDialog() {
    this.$.carDialog.toggle();
  }