ce-example-08.ts

const $readonly = Symbol('readonly');

type Constructor<T = object> = {
  new (...args: any[]): T;
  prototype: T;
};

// mixin interface
interface ReadonlyInterface {
  readonly: boolean;
}

// mixin class
export const ReadonlyMixin = <T extends Constructor<HTMLElement>>(
  base: T
): T & Constructor<ReadonlyInterface> => {
  class HasReadonly extends base {
  
    private [$readonly]!: boolean;
  
    set readonly(readonly: boolean) {
      this[$readonly] = readonly;
    }
  
    get readonly(): boolean {
      return this[$readonly];
    }
  }
  return HasReadonly;
};

// using a mixin
class MyElement extends ReadonlyMixin(HTMLElement) {
  constructor() {
    super();
    this.readonly = true;
  }
}
                 
customElements.define('my-element', MyElement);