Dynamic / Re-usable partials / components creation

ben · September 13, 2022, 2:37am

Create a normal HTML page and insert a navigation bar
Cut the navigation bar from the page
Create a JavaScript file containing the following code. I have named this file navigation.js; but this can be anything to your liking, especially if you intend to add a number of custom elements.

class Navigation extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `

         `;
    }
}

window.customElements.define('', );

Paste the navigation bar code between the back ticks resulting in

class Navigation extends HTMLElement {
    constructor() {
        super();
        this.innerHTML = `
            <header class="bg-light">
                <div class="container">
                    <div class="row">
                    <div class="col">
                        <nav class="navbar navbar-expand-lg navbar-light bg-light">
                        <a class="navbar-brand ms-auto" href="#">Navbar</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbar1_collapse">
                            <div class="navbar-nav">
                            <a class="nav-item nav-link active" href="#">Home</a>
                            <a class="nav-item nav-link" href="#">About</a>
                            <a class="nav-item nav-link" href="#">Contact</a>
                            </div>
                        </div>
                        </nav>
                    </div>
                    </div>
                </div>
            </header>
        `;
    }
}

window.customElements.define('', );

In the last line of the above code, add a name (must be a hyphened name) for the custom element and class name as in

window.customElements.define('my-navigation', Navigation);

To add more custom elements, simple add the code as shown in the first code example and follow the same procedure.
Now add the custom element and the link to the JS file to the HTM to finish up with

<!doctype html>
<html>

<head>
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>

<body is="dmx-app" id="test">

    <my-navigation></my-navigation>

    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
    <script src="navigation.js"></script>
</body>

</html>