diff --git a/source b/source index 128eb64954a..fdc69a531cc 100644 --- a/source +++ b/source @@ -3248,7 +3248,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • append() method
  • appendChild() method
  • cloneNode() method
  • -
  • moveBefore() method
  • +
  • moveBefore() method
  • importNode() method
  • preventDefault() method
  • id attribute
  • @@ -72452,60 +72452,60 @@ document.body.append(parent); elements as well. By default, the "disconnectedCallback" and "connectedCallback" would be called on the element, one after the other. This is done to maintain compatibility with existing custom elements that predate the moveBefore method. This means that by default, custom elements + data-x="dom-ParentNode-moveBefore">moveBefore() method. This means that by default, custom elements reset their state as if they were removed and re-inserted. In the example above, the impact would be that the observer would be disconnected and re-connected, and the tab index would be reset.

    To opt in to a state-preserving behavior while moveing, the author can implement a "moving, the author can implement a "connectedMoveCallback". The existence of this callback, even if empty, would supercede the default behavior of calling "disconnectedCallback" and "connectedCallback". "connectedMoveCallback" can also be an appropriate place to execute logic that depends on the element's ancestors. For example:

    class TacoButton extends HTMLElement {
    -    static observedAttributes = ["disabled"];
    +  static observedAttributes = ["disabled"];
     
    -    constructor() {
    -      super();
    -      this._internals = this.attachInternals();
    -      this._internals.role = "button";
    +  constructor() {
    +    super();
    +    this._internals = this.attachInternals();
    +    this._internals.role = "button";
     
    -      this._observer = new MutationObserver(() => {
    -        this._internals.ariaLabel = this.textContent;
    -      });
    -    }
    +    this._observer = new MutationObserver(() => {
    +      this._internals.ariaLabel = this.textContent;
    +    });
    +  }
     
    -    _notifyMain() {
    -      if (this.parentElement.tagName === "MAIN") {
    -        // Execute logic that depends on ancestors.
    -      }
    +  _notifyMain() {
    +    if (this.parentElement.tagName === "MAIN") {
    +      // Execute logic that depends on ancestors.
         }
    +  }
     
    -    connectedCallback() {
    -      this.setAttribute("tabindex", "0");
    +  connectedCallback() {
    +    this.setAttribute("tabindex", "0");
     
    -      this._observer.observe(this, {
    -        childList: true,
    -        characterData: true,
    -        subtree: true
    -      });
    +    this._observer.observe(this, {
    +      childList: true,
    +      characterData: true,
    +      subtree: true
    +    });
     
    -      this._notifyMain();
    -    }
    +    this._notifyMain();
    +  }
     
    -    disconnectedCallback() {
    -      this._observer.disconnect();
    -    }
    +  disconnectedCallback() {
    +    this._observer.disconnect();
    +  }
     
       // Implementing this function would avoid resetting the tab index or re-registering the
       // mutation observer when this element is moved inside the DOM without being disconnected.
    -    connectedMoveCallback() {
    -      // The parent can change during a state-preserving move.
    -      this._notifyMain();
    -    }
    -  }
    + connectedMoveCallback() { + // The parent can change during a state-preserving move. + this._notifyMain(); + } +}

    Core concepts