fix: the element args to the lifecycle methods were missing, althou…

…gh the README documented it. This adds those missing args as was intended.

README.md

@@ -160,21 +160,25 @@ method is the `element` that has the behavior on it:
 
 ```js
 class SomeBehavior {
-	// This is called only once, given the element that the behavior is attached to.
+	// This is called only once, given the `element` that the behavior is attached to.
 	constructor(element) {}
 
-	// This is called any time the associated `element` is appended into the DOM.
+	// This is called any time the associated `element` is appended into the
+	// DOM, passed in the `element`
 	connectedCallback(element) {}
 
-	// This is called any time the associated `element` is removed from the DOM.
+	// This is called any time the associated `element` is removed from the DOM,
+	// passed in the `element`.
 	disconnectedCallback(element) {}
 
 	// As with custom elements, define which attributes of the associated
 	// element that the behavior should react to.
 	static observedAttributes = ['some-attribute', 'other-attribute']
 
-	// This is called any time any of the `observedAttributes` of the associated element have been changed.
-	attributeChangedCallback(element, attributeName, oldValue, newValue) {}
+	// This is called any time any of the `observedAttributes` of the associated
+	// element have been changed, just like with Custom Elements but with the
+	// additional passed in `element`.
+	attributeChangedCallback(attributeName, oldValue, newValue, element) {}
 
 	// There is one additional API, unlike with Custom Elements. If `static
 	// awaitElementDefined` is `true`, then the behavior will not be

src/index.ts

@@ -9,9 +9,9 @@ import type {Constructor} from 'lowclass'
 // DOM. Make it order-independent.
 
 type PossibleBehaviorInstance = {
-	connectedCallback?: () => void
-	disconnectedCallback?: () => void
-	attributeChangedCallback?: (attr: string, oldValue: string | null, newValue: string | null) => void
+	connectedCallback?: (element: Element) => void
+	disconnectedCallback?: (element: Element) => void
+	attributeChangedCallback?: (attr: string, oldValue: string | null, newValue: string | null, element: Element) => void
 	[k: string]: any
 	[k: number]: any
 }
@@ -319,7 +319,7 @@ class HasAttribute implements CustomAttribute {
 			if (this.isConnected) {
 				const behavior = new Behavior(this.ownerElement)
 				this.behaviors.set(name, behavior)
-				behavior.connectedCallback?.()
+				behavior.connectedCallback?.(this.ownerElement)
 
 				if (Array.isArray(observedAttributes) && observedAttributes.length) {
 					this.fireInitialAttributeChangedCallbacks(behavior, observedAttributes)
@@ -348,7 +348,7 @@ class HasAttribute implements CustomAttribute {
 		// ran its connectedCallback.
 		if (!behavior) return
 
-		behavior.disconnectedCallback?.()
+		behavior.disconnectedCallback?.(this.ownerElement)
 		this.destroyAttributeObserver(behavior)
 		this.behaviors.delete(name)
 	}
@@ -392,7 +392,7 @@ class HasAttribute implements CustomAttribute {
 					continue
 				}
 
-				behavior.attributeChangedCallback(name, lastAttributeValues[name], record.oldValue)
+				behavior.attributeChangedCallback(name, lastAttributeValues[name], record.oldValue, this.ownerElement)
 
 				lastAttributeValues[name] = record.oldValue
 			}
@@ -401,7 +401,12 @@ class HasAttribute implements CustomAttribute {
 
 			for (const name in lastAttributeValues) {
 				attr = el.attributes.getNamedItem(name)
-				behavior.attributeChangedCallback(name, lastAttributeValues[name], attr === null ? null : attr.value)
+				behavior.attributeChangedCallback(
+					name,
+					lastAttributeValues[name],
+					attr === null ? null : attr.value,
+					this.ownerElement,
+				)
 			}
 		})
 
@@ -419,7 +424,12 @@ class HasAttribute implements CustomAttribute {
 
 		for (const name of attributes) {
 			if (this.ownerElement.hasAttribute(name))
-				behavior.attributeChangedCallback(name, null, this.ownerElement.attributes.getNamedItem(name)!.value)
+				behavior.attributeChangedCallback(
+					name,
+					null,
+					this.ownerElement.attributes.getNamedItem(name)!.value,
+					this.ownerElement,
+				)
 		}
 	}
 }

src/tests-shared.ts

@@ -36,23 +36,29 @@ describe('element-behaviors', () => {
 
 		class Awesomeness {
 			constructor(public el: Element) {
-				expect(this.el).toBe(div)
 				constructCount++
+				expect(this.el).toBe(div)
 			}
 
 			static observedAttributes = ['foo']
 
-			connectedCallback() {
+			connectedCallback(element: Element) {
 				connectedCount++
+				expect(element).toBe(this.el)
+				expect(element).toBe(div)
 			}
 
-			disconnectedCallback() {
+			disconnectedCallback(element: Element) {
 				disconnectedCount++
+				expect(element).toBe(this.el)
+				expect(element).toBe(div)
 			}
 
-			attributeChangedCallback(attr: string, oldVal: string | null, newVal: string | null) {
+			attributeChangedCallback(attr: string, oldVal: string | null, newVal: string | null, element: Element) {
 				attrChangedCount++
 				attrChangedArgs.push(attr, oldVal, newVal)
+				expect(element).toBe(this.el)
+				expect(element).toBe(div)
 			}
 		}