web-component - 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>会加载可能是恶意的外部资源，而不是加载一个简单的 CCS 样式表<link rel="stylesheet">。

---

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

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

<hello-world></hello-world>