Quiero mantener el foco dentro del modal con sus respectivos elementos enfocables, estoy trabajando con "WEB COMPONENTS, DOW Y SHADOW DOW"

al intentar realizar este fragmento de código, el enfoque continúa mostrando el error y va a elementos fuera del modal

 private setFocus(): void { const focusableElements = this.querySelectorAll('a[href], button, details, input, select, textarea, [tabindex]:not([tabindex="-1"]), ani-button, ani-textfield'); const firstFocusableElement = focusableElements[0]; const lastFocusableElement = focusableElements[focusableElements.length - 1]; this.addEventListener('keydown', event => { const isTabbed = event.key === 'Tab' || event.code === '9'; if (!isTabbed) { return; } if (event.shiftKey) { if (document.activeElement === firstFocusableElement) { (lastFocusableElement as HTMLElement).focus(); event.preventDefault(); } } else { if (document.activeElement === lastFocusableElement) { (firstFocusableElement as HTMLElement).focus(); event.preventDefault(); } } }); (firstFocusableElement as HTMLElement).focus(); } open(): void { // this.hidden = false; this.setAttribute('visible', 'true'); this.setFocus(); }