[HOWTO][discard-on-disconnect] Make discard-on-disconnect default

[t2ym]

[HOWTO][discard-on-disconnect] Make discard-on-disconnect default

It may be obvious but it is better to show how to make discard-on-disconnect default

Design Issue

• Should discard-on-disconnect be default for i18n mixin?
• Should disposable mixin be provided from i18n.js?

HOWTOs

Option # 1 - Set at constructor()

class MyElement extends i18n(HTMLElement) {
  constructor() {
    super();
    Promise.resolve().then(() => this.setAttribute('discard-on-disconnect', '');
    ...
  }
}

Option # 2 - Set at connectedCallback()

class MyElement extends i18n(HTMLElement) {
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute('discard-on-disconnect', '');
  }
}

Option # 3 - Override hasAttribute()

class MyElement extends i18n(HTMLElement) {
  hasAttribute(name) {
    return name === 'discard-on-disconnect' ? true : super.hasAttribute(name);
  }
}

Option # 4 - Create a mixin

// disposable.js
export const disposable = (base) => class DisposableElement extends base {
  hasAttribute(name) {
    return name === 'discard-on-disconnect' ? true : super.hasAttribute(name);
  }
}
// my-element.js
import { disposable } from './disposable.js';
class MyElement extends disposable(i18n(HTMLElement)) {
  disconnectedCallback() {
    super.disconnectedCallback();
    // own cleanup
  }
  ...
}

Option # 5 - Override i18n mixin

// disposable-i18n.js
import { i18n as _i18n } from 'i18n-element/i18n.js';
export const i18n = (base) => class DisposableElement extends _i18n(base) {
  hasAttribute(name) {
    return name === 'discard-on-disconnect' ? true : super.hasAttribute(name);
  }
}
// my-element.js
import { i18n } from './disposable-i18n.js';
class MyElement extends i18n(HTMLElement) {
  disconnectedCallback() {
    super.disconnectedCallback();
    // own cleanup
  }
  ...
}

[t2ym]

discard-on-disconnect has been deprecated at Issue #89