Search code examples
javascripthtmlweb-componentcustom-element

Vanilla hello world app using web components

I'm trying to build a simple web component without any external dependencies. Just two html files, one index.html and one webcomponent.html.

I have some personal html projects where I'd like to separate out the global html namespace into smaller files. I do not want ot use any external library like polymer for this. Neither I want to use any build system or webserver.

All the examples I found online either need an external build system or a library. Also they don't tend to work without a webserver. For instance, webcomponents/hello-world claims to use vanilla-js. But in fact, it does not as it depends on Bower.

Just two html files which work in my local edit-save-refresh development cycle. Is this actually possible? If so, how? If not, what's the closest compromise possible?

Solution

  • Here is a minimal Custom Element example with 2 files:

    1. Create your custom elemnt in a separate file, for example hello-world.js:

    class HelloWorld extends HTMLElement {
    connectedCallback () {
        this.innerHTML = 'hello, world!'
    }
}
customElements.define( 'hello-world', HelloWorld )

    2. Import and use your custom element in the main, index.html file:

    <html>
<head>
    <script src='hello-world.js'></script>
<body>
    <hello-world></hello-world>