1

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

Supersharp
  • 29,002
  • 9
  • 92
  • 134
Johannes
  • 675
  • 1
  • 7
  • 12
  • Seems you’re likely to get a better answer if you post this question at https://github.com/webcomponents/hello-world-element/issues – sideshowbarker Feb 06 '17 at 14:53
  • Note that `rel-import` have been deprecated since. Web-compoents that were using them (like https://github.com/Polight/lego/) had to be re-written and imported in js – vinyll Apr 02 '20 at 04:43

1 Answers1

3

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>
Supersharp
  • 29,002
  • 9
  • 92
  • 134
  • OK thanks! Now my problem is "how can i make it works on a cordova-phonegap project without a server?" but it's OT, i'll searching about. Thanks – Johannes Feb 06 '17 at 16:39
  • You could be able to use in a cordova-app (wich actually embeds its own server). You can also import Javascript Web Component files with – Supersharp Feb 06 '17 at 16:43
  • you should read http://stackoverflow.com/q/41539717/4600982 and/or http://stackoverflow.com/a/25800991/4600982 – Supersharp Feb 06 '17 at 16:57
  • Thanks! I just needed the simplest possible example to get started :) – xyz Aug 07 '18 at 17:11