The TC39 Decorators proposal is at Stage 3 — which means this is a “when” not an “if” at this point. We can use the babel decorators plugin to play around with the integration code right now. And, fun fact, only the integrator code needs transpiling — not the source! I.e., we could reasonably ship our implementation today as an opt-in interface which would eventually just work when browsers implement support for the new syntax.

import { XElement, property, listener, html } from '@netflix/x-element';

class HelloWorldElement extends XElement {
  @property({ type: String, default: 'World' })
  accessor name;

  @property({ type: Number, initial: 0 })
  accessor #count;

  @listener('click')
  static #onClick(host) {
    host.#count++;
  }

  static template(host) {
    return html`<button>Hello, ${host.name}! Count: ${host.#count}</button>`;
  }
}

customElements.define('hello-world', HelloWorldElement);

Browser support:

• Chrome
• Firefox
• Safari

Looks like Chrome and FF are currently implementing — it’s unclear where Safari is at.