Shepherd JS - I want to add focus state and focused state stylings on the container that each step highlights

Issue

I can't figure out how to add focus state and relevant focus state styling on the container that each step of the guided tour highlights or focuses on.

My output expectation is this:

Design Screenshot

I am able to add the focused state stylings on the containers using normal css. But I'm not able to make the container take the focused state specifically and only for the respective step of the guided tour.

This is the current screenshot based on the current code

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    keyboardNavigation: true,
    exitOnEsc: true,
    cancelIcon: {
      enabled: true
    },
    scrollTo: {
      behavior: 'smooth',
      block: 'center'
    }
  },

});

tour.addStep({
  id: 'step1',
  text: 'The Dashboard is your hub for real-time insights. See key metrics at a glance. Stay informed, stay in control.',
  attachTo: {
    element: '.step1',
    on: 'bottom'
  },
  classes: '!ml-4',
  buttons: [{
    text: 'Next',
    action: tour.next
  }],
  when: {
    show() {
      const currentStep = Shepherd.activeTour ? .getCurrentStep();
      const currentStepElement = currentStep ? .getElement();
      const header = currentStepElement ? .querySelector('.shepherd-header');
      const progress = document.createElement('span');

      progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
      header ? .insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
    }
  }
});

tour.addStep({
  id: 'step2',
  text: 'Track your financial health effortlessly. P&L insights in a snap. Smart decisions, stellar results.',
  attachTo: {
    element: '.step2',
    on: 'bottom'
  },
  classes: '!ml-4',
  buttons: [{
      text: 'Back',
      action: tour.back
    },
    {
      text: 'Next',
      action: tour.next
    }
  ],
  when: {
    show() {
      const currentStep = Shepherd.activeTour ? .getCurrentStep();
      const currentStepElement = currentStep ? .getElement();
      const header = currentStepElement ? .querySelector('.shepherd-header');
      const progress = document.createElement('span');

      progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
      header ? .insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
    }
  }
});

tour.addStep({
  id: 'step3',
  text: 'Keep customers close. Understand retention patterns. Tailor strategies, boost loyalty',
  attachTo: {
    element: '.step3',
    on: 'bottom'
  },
  classes: '!ml-4',
  buttons: [{
      text: 'Back',
      action: tour.back
    },
    {
      text: 'Next',
      action: tour.next
    }
  ],
  when: {
    show() {
      const currentStep = Shepherd.activeTour ? .getCurrentStep();
      const currentStepElement = currentStep ? .getElement();
      const header = currentStepElement ? .querySelector('.shepherd-header');
      const progress = document.createElement('span');

      progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
      header ? .insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
    }
  }
});

tour.addStep({
  id: 'step4',
  text: 'Your products, your way. Dive into detailed insights. Optimize offerings, maximize profits.',
  attachTo: {
    element: '.step4',
    on: 'bottom'
  },
  classes: '!ml-4',
  buttons: [{
      text: 'Back',
      action: tour.back
    },
    {
      text: 'Next',
      action: tour.next
    }
  ],
  when: {
    show() {
      const currentStep = Shepherd.activeTour ? .getCurrentStep();
      const currentStepElement = currentStep ? .getElement();
      const header = currentStepElement ? .querySelector('.shepherd-header');
      const progress = document.createElement('span');

      progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
      header ? .insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
    }
  }
});

tour.addStep({
  id: 'step5',
  text: 'Visualize success. Sales trends at your fingertips. Uncover patterns, drive growth.',
  attachTo: {
    element: '.step5',
    on: 'bottom'
  },
  classes: '!ml-4',
  buttons: [{
      text: 'Back',
      action: tour.back
    },
    {
      text: 'Next',
      action: tour.next
    }
  ],
  when: {
    show() {
      const currentStep = Shepherd.activeTour ? .getCurrentStep();
      const currentStepElement = currentStep ? .getElement();
      const header = currentStepElement ? .querySelector('.shepherd-header');
      const progress = document.createElement('span');

      progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
      header ? .insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
    }
  }
});

tour.addStep({
  id: 'step6',
  text: 'Fine-tune finances. Add custom expenses for precise P&L. Every detail counts, so does your profit.',
  attachTo: {
    element: '.step6',
    on: 'bottom'
  },
  classes: '!ml-4',
  buttons: [{
      text: 'Back',
      action: tour.back
    },
    {
      text: 'Next',
      action: tour.next
    }
  ],
  when: {
    show() {
      const currentStep = Shepherd.activeTour ? .getCurrentStep();
      const currentStepElement = currentStep ? .getElement();
      const header = currentStepElement ? .querySelector('.shepherd-header');
      const progress = document.createElement('span');

      progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
      header ? .insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
    }
  }
});

tour.addStep({
  id: 'step7',
  text: 'Make it yours. Personalize settings for your unique needs. Your app, your rules.',
  attachTo: {
    element: '.step7',
    on: 'bottom'
  },
  classes: '!ml-4',
  buttons: [{
      text: 'Back',
      action: tour.back
    },
    {
      text: 'Next',
      action: tour.next
    }
  ],
  when: {
    show() {
      const currentStep = Shepherd.activeTour ? .getCurrentStep();
      const currentStepElement = currentStep ? .getElement();
      const header = currentStepElement ? .querySelector('.shepherd-header');
      const progress = document.createElement('span');

      progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
      header ? .insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
    }
  }
});

tour.addStep({
  id: 'step8',
  text: 'Connect effortlessly. Integrate your data sources. Unify insights, streamline success.',
  attachTo: {
    element: '.step8',
    on: 'bottom'
  },
  classes: '!ml-4',
  buttons: [{
      text: 'Back',
      action: tour.back
    },
    {
      text: 'Done',
      action: tour.complete
    }
  ],
  when: {
    show() {
      const currentStep = Shepherd.activeTour ? .getCurrentStep();
      const currentStepElement = currentStep ? .getElement();
      const header = currentStepElement ? .querySelector('.shepherd-header');
      const progress = document.createElement('span');

      progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
      header ? .insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
    }
  }
});

tour.start();

Solution

It's really simple: the script is adding a class named .shepherd-target to highlight the element, so you can add the following CSS to your stylesheet:

.shepherd-target{
    box-shadow: 0 0px 9px rgb(65 117 204);
} 

Answered By - iorgv