From ded78da47acd8de2f64d16b29ececa13a27a46ae Mon Sep 17 00:00:00 2001 From: Dominic Farolino Date: Tue, 17 Dec 2024 11:47:35 -0500 Subject: [PATCH] Correct a few links and formatting things --- source | 66 +++++++++++++++++++++++++++++----------------------------- 1 file changed, 33 insertions(+), 33 deletions(-) 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