是否可以创建任何人无需安装即可使用的 Web 组件？

Question

我刚刚开始使用 Web 组件，如果我理解正确的话，关键是它们可以被任何人重用。是否可以创建一个任何人都可以使用的组件，只需将 html 添加到他们的静态站点（类似于 JavaScript 小部件的添加方式，只需复制粘贴几行代码），还是需要有人安装？或者这不是 Web 组件的预期用例？

Answer 1

是的。 Web 组件是一种 "Javascript widget".

通常，您在 Javascript 文件中定义 Web 组件。然后，您可以将其包含在任何带有 <script> 元素的 HTML 中。

带有名为 <hello-world> 的最小自定义元素的示例：

在你好-world.js:

customElements.define( 'hello-world', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( {mode: 'open' })
            .innerHTML = 'Hello World!'
    }
} )

在您的主页中index.html:

<html>
    <head>
        <!-- import the web component -->
        <script src="hello-world.js">
    </head>
    <body>
        <!-- use the new element -->
        <hello-world></hello-world>
    </body>
</html>

注意：或者，也可以将定义自定义元素的 Javascript 代码复制并粘贴到其主 HTML 页面。

是否可以创建任何人无需安装即可使用的 Web 组件？

Is it possible to create a web component anyone can use without installation?

html

javascript

web-component

polymer

custom-element