BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser.

Index

@page "/"

<h1 data-tour-step="Hello">Hello, world!</h1>

Welcome to your new app.

<ul>
    <li data-tour-step="step-1">Step 1</li>
    <li data-tour-step="step-2">Step 2</li>
    <li data-tour-step="step-3">Step 3</li>
    <li data-tour-step="step-4">Step 4</li>
    <li data-tour-step="step-5">Step 5</li>
</ul>

<button @onclick="OnButtonClick">Take the tour!</button>

<div data-tour-name="my-tour" style="display: none;">
    <div data-tour-step data-target="Hello">
        This is the Hello, World object
    </div>
    <div data-tour-step data-target="step-1">
        This is the first step
    </div>
    <div data-tour-step data-target="step-5">
        Now we have skipped ahead to the last step
    </div>
</div>

@inject IJSRuntime JSRuntime
@code {
    private async Task OnButtonClick()
    {
        await JSRuntime.InvokeVoidAsync("tour.start", "my-tour");
    }
}

namespace BlazorFiddleProject
{
    using Microsoft.Extensions.DependencyInjection;


    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // Warning: IComponentsApplicationBuilder - not the original .NET 6.0 interface. This was done to make old saves work. 
        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>BlazorFiddleProject</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />
    <script src="_content/MatBlazor/dist/matBlazor.js"></script>        

    <!-- import shepherd CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/css/shepherd.css"/>

    <style>
        app { }
    </style>

    <!--import shepherd -->
    <script src="https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/js/shepherd.min.js"></script>
    <!-- shepherd integration -->
    <script type="text/javascript">
        window.tour = {
            start: name => {
                // create a Shepherd tour
                const tour = new Shepherd.Tour({
                    useModalOverlay: true,
                    defaultStepOptions: {
                        classes: 'shadow-md bg-purple-dark',
                        scrollTo: true
                    }
                });

                // add the steps from our step container
                const containerEl = document.querySelector(`[data-tour-name="${name}"]`);
                const stepEls = containerEl.querySelectorAll('[data-tour-step]');
                stepEls.forEach(stepEl => {
                    const stepName = stepEl.getAttribute('data-target');
                    const target = document.querySelector(`[data-tour-step="${stepName}"]`);

                    // add the step to the Shepher tour
                    tour.addStep({
                        // id: 'example-step',
                        text: stepEl.innerHTML,
                        attachTo: {
                            element: target,
                            on: 'bottom'
                        },
                        classes: 'example-step-extra-class',
                        buttons: [
                            {
                                text: 'Next',
                                action: tour.next
                            }
                        ]
                    });
                }); 

                tour.start();               
            }
        };
    </script>
</head>
<body>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.