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()
methodappendChild()
methodcloneNode()
methodmoveBefore()
methodmoveBefore()
methodimportNode()
methodpreventDefault()
methodid
attributedisconnectedCallback
" 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();
+ }
+}