allow imperative defining of associated elements

Author: keithamus

src/auto-complete-element.ts

@@ -6,18 +6,40 @@ const state = new WeakMap()
 
 // eslint-disable-next-line custom-elements/file-name-matches-element
 export default class AutocompleteElement extends HTMLElement {
+  #forElement: HTMLElement | null = null
+  get forElement(): HTMLElement | null {
+    if (this.#forElement?.isConnected) {
+      return this.#forElement
+    }
+    const id = this.getAttribute('for')
+    const root = this.getRootNode()
+    if (id && (root instanceof Document || root instanceof ShadowRoot)) {
+      return root.getElementById(id)
+    }
+    return null
+  }
+
+  set forElement(element: HTMLElement | null) {
+    this.#forElement = element
+    this.setAttribute('for', '')
+  }
+
+  #inputElement: HTMLInputElement | null = null
+  get inputElement(): HTMLInputElement | null {
+    if (this.#inputElement?.isConnected) {
+      return this.#inputElement
+    }
+    return this.querySelector<HTMLInputElement>('input')
+  }
+
+  set inputElement(input: HTMLInputElement | null) {
+    this.#inputElement = input
+    this.#reattachState()
+  }
+
   connectedCallback(): void {
-    const listId = this.getAttribute('for')
     if (!this.isConnected) return
-    if (!listId) return
-
-    // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
-    const input = this.querySelector('input')
-    const results = (this.getRootNode() as Document).getElementById(listId)
-    if (!(input instanceof HTMLInputElement) || !results) return
-    const autoselectEnabled = this.getAttribute('data-autoselect') === 'true'
-    state.set(this, new Autocomplete(this, input, results, autoselectEnabled))
-    results.setAttribute('role', 'listbox')
+    this.#reattachState()
   }
 
   disconnectedCallback(): void {
@@ -28,6 +50,15 @@ export default class AutocompleteElement extends HTMLElement {
     }
   }
 
+  #reattachState() {
+    state.get(this)?.destroy()
+    const {forElement, inputElement} = this
+    if (!forElement || !inputElement) return
+    const autoselectEnabled = this.getAttribute('data-autoselect') === 'true'
+    state.set(this, new Autocomplete(this, inputElement, forElement, autoselectEnabled))
+    forElement.setAttribute('role', 'listbox')
+  }
+
   get src(): string {
     return this.getAttribute('src') || ''
   }
@@ -59,7 +90,7 @@ export default class AutocompleteElement extends HTMLElement {
   fetchResult = fragment
 
   static get observedAttributes(): string[] {
-    return ['open', 'value']
+    return ['open', 'value', 'for']
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
@@ -68,6 +99,10 @@ export default class AutocompleteElement extends HTMLElement {
     const autocomplete = state.get(this)
     if (!autocomplete) return
 
+    if (this.forElement !== state.get(this)?.results || this.inputElement !== state.get(this)?.input) {
+      this.#reattachState()
+    }
+
     switch (name) {
       case 'open':
         newValue === null ? autocomplete.close() : autocomplete.open()

test/test.js

@@ -270,6 +270,34 @@ describe('auto-complete element', function () {
     })
   })
 
+  describe('redefining elements', () => {
+    beforeEach(function () {
+      document.body.innerHTML = `
+        <div id="mocha-fixture">
+          <auto-complete src="/search" data-autoselect="true">
+            <input type="text">
+            <input id="second" type="text">
+            <ul></ul>
+            <div id="popup-feedback"></div>
+          </auto-complete>
+        </div>
+      `
+    })
+
+    it('changes where content gets rendered based on properties', async function () {
+      const container = document.querySelector('auto-complete')
+      const input = container.querySelector('input#second')
+      const list = container.querySelector('ul')
+      container.forElement = list
+      container.inputElement = input
+
+      triggerInput(input, 'hub')
+      await once(container, 'loadend')
+
+      assert.equal(5, list.children.length)
+    })
+  })
+
   describe('shadowdom', () => {
     let shadow = null
     beforeEach(function () {