I want to keep the focus inside the modal with its respective focusable elements, I'm working with "WEB COMPONENTS, DOW AND SHADOW DOW"

when trying to perform this code snippet, focus still continues to show error and go to elements outside the 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();
  }