Define, Importing and Using Custom Element in TypeScript and HTML

Question

I am trying to define a custom element and use it in the HTML template, but it doesn't show up, nothing gets logged from the console. It seems the element doesn't get defined this way.

What am I doing wrong? I am using webpack and TypeScript.

I have defined a class that extends a HTML element in top-bar.ts

export class TopBar extends HTMLElement {

    shadowDOM : ShadowRoot;

    constructor() {
        super();
        console.log('from constructor');
        this.shadowDOM = this.attachShadow({mode:"open"});
    }

    connectedCallback() : void {
        this.render();
    }

    render() : void {
        this.innerHTML = `

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <style>
            .top-bar {
                box-shadow: 0px 2px 10px 6px #ccc;
                height: 40px;
            }
            
            .top-bar h5 {
                margin-bottom: 0;
                color: #273C75;
            }
            
            .top-bar img {
                display: block;
                width: 36px;
                height: 36px;
                margin-right: 0.5rem;
            }
        </style>
        <nav class="top-bar d-flex justify-content-center align-items-center">
            <img src="img/Beep-Signal.png" alt="">
            <h5>LoRa Dashboard</h5>
        </nav>
        `
    }

}

customElements.define("top-bar", TopBar);

and in index.ts, I import the TopBar.

import * as TopBar from './components/top-bar'

and in index.html, I put the top-bar element

<!DOCTYPE html>
<html>
  <head>
    <title>LoRa Dashboard</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </head>
  <body>
    <script src="bundle.js"></script>
    <top-bar></top-bar>
  </body>
</html>

Add a debugger; statement before where you think it goes wrong and debug in F12 Dev Console — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Jul 18, 2020 at 18:56
Wow thanks! Although the problem was solved long ago, I never knew that debugger statement. Seems really useful in many situations. — Seiko Santana
– Seiko Santana, Commented May 21, 2022 at 7:02

Seiko Santana · Accepted Answer · 2020-07-21 03:18:20Z

1

So after a while, I finally found that top-bar.ts doesn't seem to get included in the bundle.

It seems like top-bar doesn't get included although I have imported it in index.ts, my suspect is because that nothing from top-bar.ts is used anywhere in index.ts, only in HTML (when testing). That's why the custom element never gets defined.

So I added a dummy function in top-bar.ts and called it in index.ts only to get it included. This works for my project for now, and I'm new to TypeScript and JavaScript, but I'm sure that there is a better workaround instead of calling a dummy function just to get it included.

answered Jul 21, 2020 at 3:18

Seiko Santana

3331 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vyenkv Over a year ago

I suppose it didn't work, because the entry point of the app is index.ts, since index.ts doesn't import anything from top-bar.ts, top-bar.ts has no use and webpack doesn't get to it. You need to change the entry point in webpack config or put the code from top-bar in index.ts

Collectives™ on Stack Overflow

Define, Importing and Using Custom Element in TypeScript and HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related