Fixes #38 #95
Fixes #38 #95
Conversation
…entById` to find referenced elements
src/auto-complete-element.ts
Outdated
| @@ -12,7 +12,7 @@ export default class AutocompleteElement extends HTMLElement { | |||
|
|
|||
| // 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().getElementById(listId) | |||
There was a problem hiding this comment.
This will break because getRootNode outside of the ShadowDOM returns the element. You'll need to do some more checks. Perhaps it's worth also falling back to light dom if we cannot find the id in the shadowdom?
| const results = this.getRootNode().getElementById(listId) | |
| const shadowRoot = this.getRootNode() | |
| let results | |
| if (shadowRoot instanceof ShadowRoot) { | |
| results = root.getElementById(listId) | |
| } | |
| if (!results) this.ownerDocument.getElementById(listId) |
I also think this is a good point to start adding tests that confirm the desired behaviour.
There was a problem hiding this comment.
As long as element is connected getRootNode will return either a ShadowRoot or document. As we call it inside connectedCallback, it should be safe. I'll add this.isConnected check in the callback.
To squash the typescript error I'll cast rootNode to Document, as Document and ShadowRoot has no common ancestor.
There was a problem hiding this comment.
That's good clarification, thanks. What do you think about resolving outside of the shadowdom if the element isn't found within the shadowdom?
There was a problem hiding this comment.
I think no. auto-complete being inside shadowDOM strongly implies it's being used in the internals of another custom element where encapsulation inside a shadowDOM is the whole point. Better to fail consistently than risk surprising behavior.
Adds .isconnected check in connectedCallback
Usage of
document.getElementByIdcauses autocomplete to fail to find needed elements ifauto-completeis created in javascript or is in the shadowDOM of another element.This fixes the issue by replacing usage of
document.getElementByIdwithquerySellector.