使用 Web 组件的香草 hello world 应用程序

Posted

技术标签:

【中文标题】使用 Web 组件的香草 hello world 应用程序【英文标题】:Vanilla hello world app using web components 【发布时间】:2017-04-20 03:48:28 【问题描述】:

我正在尝试构建一个没有任何外部依赖项的简单 Web 组件。只有两个 html 文件,一个 index.html 和一个 webcomponent.html。

我有一些个人 html 项目,我想将全局 html 命名空间分离成更小的文件。我不想为此使用任何外部库,如聚合物。我也不想使用任何构建系统或网络服务器。

我在网上找到的所有示例都需要外部构建系统或库。他们也不会在没有网络服务器的情况下工作。例如,webcomponents/hello-world 声称使用 vanilla-js。但实际上,它并不依赖于 Bower。

只有两个 html 文件在我的本地编辑-保存-刷新开发周期中工作。这真的可能吗?如果是这样,怎么做?如果不是,最接近的折衷方案是什么?

【问题讨论】:

Bower 是一个包管理器。组件本身不依赖于 Bower,而是依赖于它的构建系统。该项目使用 Bower 下载 webcomponents polyfill。你会注意到组件的 source 只包含 vanilla JS。 如果您提供的示例包括 Bower,则该示例依赖于 Bower。 Bower 是用于代码还是仅用于构建都没有关系。所以 component 确实不依赖于 Bower,但 example 确实如此。 【参考方案1】:

代码:

class HelloWorld extends HTMLElement 
    constructor() 
      super();
      // Attach a shadow root to the element.
      let shadowRoot = this.attachShadow(mode: 'open');
      shadowRoot.innerHTML = `<p>hello world</p>`;
    
  
  customElements.define('hello-world', HelloWorld);
  &lt;hello-world&gt;&lt;/hello-world&gt;

【讨论】:

【参考方案2】:

这是一个包含 2 个文件的最小自定义元素示例:

1. 在单独的文件中创建您的自定义元素,例如 hello-world.js

class HelloWorld extends HTMLElement 
    connectedCallback () 
        this.innerHTML = 'hello, world!'
    

customElements.define( 'hello-world', HelloWorld )

2.index.html 主文件中导入并使用您的自定义元素:

<html>
<head>
    <script src='hello-world.js'></script>
<body>
    <hello-world></hello-world>

【讨论】:

不再支持 HTML 导入,并且可能永远不会:***.com/questions/34408880/… @pdem 你是对的。现在我们应该将自定义元素定义打包在一个 javascript 文件中。我会尽快更新答案

以上是关于使用 Web 组件的香草 hello world 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

javascript 香草web组件

Vue.js 系列 - Hello World

react 第一个组件 “hello world!”

javascript 反应Hello World组件

使用bottle进行web开发:hello world

使用 Spring 创建“Hello, World”超媒体驱动的 REST Web 服务