What is the function of the hash tag in this template literal?

This is the code I don't understand:

// Show the selected panel
grandparent.parentNode
    .querySelector(`#${target.getAttribute("aria-controls")}`)
    .removeAttribute("hidden");

specifically:

.querySelector(`#${target.getAttribute("aria-controls")}`)

It's copied from an MDN page about accessible tabs. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role.

How does the template literal work? To be more precise, what is that # symbol pointing at? (I presume it's getting the id of a selected tabpanel but I can't see how it works.)

Here's the full code (including HTML and CSS, all copied from the MDN page):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabs Test</title>
    <style>
        .tabs {
            padding: 1em;
        }

        [role="tablist"] {
            margin-bottom: -1px;
        }

        [role="tab"] {
            position: relative;
            z-index: 1;
            background: white;
            border-radius: 5px 5px 0 0;
            border: 1px solid grey;
            border-bottom: 0;
            padding: 0.2em;
        }

        [role="tab"][aria-selected="true"] {
            z-index: 3;
        }

        [role="tabpanel"] {
            position: relative;
            padding: 0 0.5em 0.5em 0.7em;
            border: 1px solid grey;
            border-radius: 0 0 5px 5px;
            background: white;
            z-index: 2;
        }

        [role="tabpanel"]:focus {
            border-color: orange;
            outline: 1px solid orange;
        }
    </style>

</head>

<body>
    <div class="tabs">
        <div role="tablist" aria-label="Sample Tabs"><!-- parent (of button) -->

            <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0">
                First Tab
            </button>

            <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
                Second Tab
            </button>

            <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">
                Third Tab
            </button>
        </div>
        <div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
            <p>Content for the first panel</p>
        </div>
        <div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
            <p>Content for the second panel</p>
        </div>
        <div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden>
            <p>Content for the third panel</p>
        </div>
    </div>

    <script>
        window.addEventListener("DOMContentLoaded", () => {
            const tabs = document.querySelectorAll('[role="tab"]');
            const tabList = document.querySelector('[role="tablist"]');

            // Add a click event handler to each tab
            tabs.forEach((tab) => {
                tab.addEventListener("click", changeTabs);
            });

            // Enable arrow navigation between tabs in the tab list
            let tabFocus = 0;

            tabList.addEventListener("keydown", (e) => {
                // Move right
                if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
                    tabs[tabFocus].setAttribute("tabindex", -1);
                    if (e.key === "ArrowRight") {
                        tabFocus++;
                        // If we're at the end, go to the start
                        if (tabFocus >= tabs.length) {
                            tabFocus = 0;
                        }
                        // Move left
                    } else if (e.key === "ArrowLeft") {
                        tabFocus--;
                        // If we're at the start, move to the end
                        if (tabFocus < 0) {
                            tabFocus = tabs.length - 1;
                        }
                    }

                    tabs[tabFocus].setAttribute("tabindex", 0);
                    tabs[tabFocus].focus();
                }
            });
        });

        function changeTabs(e) {
            const target = e.target;
            const parent = target.parentNode;
            const grandparent = parent.parentNode;


            // Remove all current selected tabs
            parent
                .querySelectorAll('[aria-selected="true"]')
                .forEach((t) => t.setAttribute("aria-selected", false));

            // Set this tab as selected
            target.setAttribute("aria-selected", true);

            // Hide all tab panels
            grandparent
                .querySelectorAll('[role="tabpanel"]')
                .forEach((p) => p.setAttribute("hidden", true));

            // Show the selected panel
            grandparent.parentNode
                .querySelector(`#${target.getAttribute("aria-controls")}`)
                .removeAttribute("hidden");

        }

    </script>

</body>

</html>

Solution

element.querySelector(`#${target.getAttribute("aria-controls")}`)

In this code let's take the element as HTML tag h1.

1 .querySselector() method is a CSS selector we use to select the found element through class or id.

2- # is used for id and (.) is for class

3- The target refers to the element we target inside the dom.

4-.getAttribute() method is used to get the attribute value of the targeted element.

5- Lastly they use ${} template literal to wrap the value return by the getAttribute() method.

According to the MDN doc code:

     const tabs = document.querySelectorAll('[role="tab"]'); // this is the target

on this target, they have aria-controls="panel-1" and this panel-1 is the id of element .