webcomponent basic (no polymer, etc..): 简单的例子'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>

webcomponent basic (no polymer, etc..): 简单的例子'hello world'，为什么需要服务器？

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

web-component

custom-element

html5-import