禁用单击聚合物中的自定义元素

Question

What is the best way to disable a custom-element from being clicked (eg while it is in an animation state or just because it should be disabled for the user). Meaning no input events like "click"/"tap" should be fired and links disabled.

I want to disable the whole element including other paper-elements, not just paper-button etc. For this I know there is the "disabled" attribute.

Is it best to use CSS with pointer-events ? Or is there any other way working for all browser?

enter link description here

Answer 1

Thanks, I am doing it now the following way, works fine:

In custom-styles

  :host([disabled]) {
    color: #a8a8a8;
    cursor: auto;
    pointer-events: none;
  }

In properties

      disabled: {
        type: Boolean,
        notify: true,
        reflectToAttribute: true
      }

In Code

       this.disabled = false;