Polymer 2: Handle clicks on PaperCard header

Question

I have a custom element that contains a <paper-card> element. I want to listen for clicks on the header of that element, i.e. the <div class="header"> element.

My current solution looks like this

<paper-card heading="[[title]]" on-tap="onCardClick">
    ...
</paper-card>

onCardClick(e){
    if( e.path[0].classList.contains('header') || e.path[0].classList.contains('title-text') ){
        // Header was clicked
    }
}

but it feels hacky.

Is there a better way of doing this?

Answer 1

I would suggest separating the header element like

<paper-card>
  <div class="header" on-click="onCardClick">
    <div class="title-text">[[title]]</div>
  </div>
</paper-card>

with the original CSS:

.header {
  position: relative;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
}

.title-text {
  padding: 16px;
  font-size: 24px;
  font-weight: 400;
  color: var(--paper-card-header-color, #000);
}

It has exactly the same effect as you use the heading attribute but is more flexible.