CODEWITHSUNDEEP
javascripthtmlweb-componentcustom-element
Ruudjah
Ruudjah

Reputation: 847

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?

Upvotes: 6

Views: 2060

Answers (2)

Sandeep Gupta
Sandeep Gupta

Reputation: 7250

Code:

class HelloWorld extends HTMLElement {
    constructor() {
      super();
      // Attach a shadow root to the element.
      let shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.innerHTML = `<p>hello world</p>`;
    }
  }
  customElements.define('hello-world', HelloWorld);
  <hello-world></hello-world>

Upvotes: 2

Supersharp
Supersharp

Reputation: 31181

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>

Upvotes: 7

Related Questions