Fixes #38

Replaces usages of `document.getElementById` with `container.querySelector`

Author: augonis

src/auto-complete-element.ts

@@ -8,11 +8,12 @@ const state = new WeakMap()
 export default class AutocompleteElement extends HTMLElement {
   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 = document.getElementById(listId)
+    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))

src/autocomplete.ts

@@ -28,9 +28,9 @@ export default class Autocomplete {
     this.input = input
     this.results = results
     this.combobox = new Combobox(input, results)
-    this.feedback = document.getElementById(`${this.results.id}-feedback`)
+    this.feedback = (container.getRootNode() as Document).getElementById(`${this.results.id}-feedback`)
     this.autoselectEnabled = autoselectEnabled
-    this.clearButton = document.getElementById(`${this.input.id || this.input.name}-clear`)
+    this.clearButton = (container.getRootNode() as Document).getElementById(`${this.input.id || this.input.name}-clear`)
 
     // check to see if there are any default options provided
     this.clientOptions = results.querySelectorAll('[role=option]')

test/test.js

@@ -314,6 +314,34 @@ describe('auto-complete element', function () {
       assert.equal(feedback.textContent, '')
     })
   })
+
+  describe('shadowdom', () => {
+    let shadow = null
+    beforeEach(function () {
+      const fixture = document.createElement('div')
+      fixture.id = 'mocha-fixture'
+      document.body.append(fixture)
+      shadow = fixture.attachShadow({mode: 'open'})
+      shadow.innerHTML = `
+          <auto-complete src="/search" for="popup">
+            <input type="text">
+            <ul id="popup"></ul>
+            <div id="popup-feedback"></div>
+          </auto-complete>
+        </div>
+      `
+    })
+
+    it('uses rootNode to find idrefs', async function () {
+      const container = shadow.querySelector('auto-complete')
+      const input = container.querySelector('input')
+      const popup = container.querySelector('#popup')
+
+      triggerInput(input, 'hub')
+      await once(container, 'loadend')
+      assert.equal(5, popup.children.length)
+    })
+  })
 })
 
 function waitForElementToChange(el) {