javascript - 使用 Web 组件的 Vanilla hello world 应用程序

标签 javascript html web-component custom-element

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

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

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

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

最佳答案

这是一个包含 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>

关于javascript - 使用 Web 组件的 Vanilla hello world 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40979549/

相关文章:

javascript - 跳过一条路由的 basicAuth

javascript - 不带缓冲的节流流

jquery - 鼠标悬停在所有元素上同时发生的效果

binding - 动态插入的 polymer 元素中的数据绑定(bind)

javascript - 如何获得 svg 图像元素的自然宽度和高度?

javascript - 唯一标识单击按钮所在的表格行

javascript - 更改 Google Maps V3 Maker 图标的正确方法是什么?

JavaScript 添加 onclick 事件到元素

angular - Angular 组件是否与自定义元素(来自网络组件技术)相同?

polymer - 使用 Polymer Paper-Slider 创建具有两个值的范围