webcomponent basic（无聚合物等）：简单示例“hello world”，为什么需要服务器？

Question

我是 webcomponent 的新手，我阅读了一些指南，但我真的不知道如何在最新的 chrome 56 上构建一个简单的 webcomponent（因此，不需要 polyfill）。我想在没有外部库（没有聚合物等）的情况下使用它。我发现的唯一简单示例是（https://github.com/webcomponents/hello-world-element），但我不明白为什么它需要服务器（polyserve）才能看到 index.html 工作。它只是客户端，如 Angular2。 谢谢

Answer 1

它需要一个服务器，因为它使用了<link rel="import"> HTML 元素，出于安全原因需要一个服务器。

这个<link> 加载的外部资源可能是恶意的，这比加载<link rel="stylesheet"> 的简单CCS 样式表要多得多。

---

这是一个不需要服务器即可运行的简单示例：

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

<hello-world></hello-world>