webcomponent basic (no polymer, etc..): simple example 'hello world', why does it need a server?

Question

i'm new on webcomponent, i read some guides, but i really can't figured out how to build a simple webcomponent, on latest chrome 56 (so, no polyfill needed). I want to use it without external libraries (no polymer, etc). The only simple example i found is this (https://github.com/webcomponents/hello-world-element) but i don't understand why it needs a server (polyserve) to see the index.html working. It's only client-side, like Angular2. Thanks

Answer 1

It needs a server because it makes use of <link rel="import"> HTML element which requires a server for security reasons.

This <link> loads external resources that could be malicious, much more than a simple CCS stylesheet loaded with <link rel="stylesheet">.

---

Here is a simple example that doesn't need a server to run:

customElements.define( 'hello-world', class extends HTMLElement 
{
  connectedCallback() {
     console.log( 'connected' )
     this.innerHTML = 'Hello, World!'
  }
} )

<hello-world></hello-world>