This callback is granted to be invoked only once, and before any other callback, whenever a mixin/behavior is attached through the element's class, somehow simulating what a constructor would do with Custom Elements.

This callback is ideal to add related event listeners, setup an element for the specific mixin/behavior, and so on.

Please note that if a mixin/behavior is detached, and then re-attached, this callback will be invoked again.

If any observedAttributes is specified, or if there is an attributeChangedCallback, this is invoked every time observed attributes change.

Like it is for Custom Elements, this callback is invoked, after a mixin/behavior is attached, hence after attachedCallback, but before connectedCallback.

This callback is also invoked during the element lifecycle, whenever observed attributes change, providing the oldValue and the newValue.

Both values are null if there was not attribute, or if the attribute got removed, replicating the native Custom Element behavior.

This callback is granted to be invoked after an element gets a new mixin/behavior, if the element is already live, and every other time the element gets moved or re-appended on the DOM, exactly like it is for native Custom Elements.

Please note that when a mixin/behavior is attached, and there are observed attributes, this callback will be invoked after attributeChangedCallback.

This callback is granted to be invoked when an element gets removed from the DOM, and it would never trigger if the connectedCallback didn't happen already.

Both callbacks are the ideal place to attach, on connected, and remove, on disconnected, timers, animations, or idle related callbacks, as even when elements get trashed, both callbacks are granted to be executed, and in the right order of events.

This callback is not granted to be invoked if an element get trashed, but it's granted to be invoked after disconnectedCallback, if a mixin/behavior is removed from an element.

Please note that this callback is not really useful for elements that might be, or may not be, trashed, because there is no way to use a FinalizationRegistry and pass along the element, but it's very hando for those elements that never leave the DOM, but might change, over time, their classes, hence their mixins/behaviors.

import {define} from 'p-cool';

define('mixin', {
  attachedCallback(element) {
    console.log('mixin attached');
  },
  detachedCallback(element) {
    console.log('mixin detached');
  }
});

// example
document.body.innerHTML = `
  <div id="first" class="mixin">First</div>
  <div id="second" class="mixin">Second</div>
`;
// logs "mixin attached" twice

// will **not** "mixin detached"
first.remove();

// it **will** log "mixin detached"
second.classList.remove('mixin');