How to disable a custom component with authorize c

Question

I'm trying to create some authorization logic for my custom components. What I want to achieve is that I can set an attribute which disables the component entirely, e.g. when a user has read-only rights. I tried with a button but am not really satisfied with it. I'm basing my work upon the solution to this question

my-button.html: (currently html only)

<template bindable="icon, disabled">
  <require from="./buttons.css"></require>

  <button class="btn btn-danger" disabled.bind="disabled">
      <slot>Enter text</slot>
      <i if.bind="icon" class="fa fa-${icon}"></i>
  </button>
</template>

parent.html:

<my-button authorized.bind="false" click.delegate="doSmth()" icon="home">NotAuth</my-button>

This does not really work unfortunately, maybe I'm doing something wrong here. My workaround was to add a disabled class to the element where the attribute is attached to, in the attribute's valueChanged method:

private valueChanged() {
    if (this.disabledBinding) {
    [...]    
    } else {
      if (this.value === true) {
        this.el.removeAttribute('disabled');
        this.el.classList.remove('disabled');
      } else {
        this.el.setAttribute('disabled', 'disabled');
        // Added this class so that all child elements cannot be clicked, also for custom components.
        this.el.classList.add('disabled');
      }
    }
  }

together with

.disabled {
  pointer-events: none;
}

This works quite ok, but the styling still needs to be performed then, possibly on each element since they can differ. This then brings me to add a disabled.bind expression to specific elements, to apply their individual disabled styles. This removes the benefit of the great auth attribute I think.

Is there any way this works with custom components?