Deprecation Guide for Reopening Classic Component Super Class

Reopening the Ember.Component super class has far-reaching consequences. For example, it may unexpectedly break addons that are not expecting the changes.

To respond to DOM events globally, consider instead using global event listeners.

Before:

import Component from '@ember/component';

Component.reopen({
  click() {
    console.log('Clicked on a classic component');
  }
});

After:

document.addEventListener('click', event => {
  if (event.target.classList.contains('my-component')) {
    console.log('Clicked on a classic component');
  }
});

Alternatively, you can create a custom subclass of Ember.Component with the behavior you want and subclass from that component in your app. That way, only those components which explicitly opted into the changes will be affected.

Before:

import Component from '@ember/component';

Component.reopen({
  attributeBindings: ['metadata:data-my-metadata'],
  metadata: ''
});

After:

// app/components/base.js
import Component from '@ember/component';

// Subclass from this in your app, instead of subclassing from Ember.Component
export default Component.extend({
  attributeBindings: ['metadata:data-my-metadata'],
  metadata: ''
});