Javascript 是否可以创建一个任何人都可以不用安装就使用的web组件？_Javascript_Html_Polymer_Web Component_Custom Element

Javascript 是否可以创建一个任何人都可以不用安装就使用的web组件？

javascript html polymer

Javascript 是否可以创建一个任何人都可以不用安装就使用的web组件？,javascript,html,polymer,web-component,custom-element,Javascript,Html,Polymer,Web Component,Custom Element,我刚刚开始学习web组件，如果我理解正确的话，关键是任何人都可以重用它们。是否可以创建一个任何人都可以使用的组件，只需将一段html添加到他们的静态站点（类似于添加JavaScript小部件的方式，只需复制粘贴几行代码），还是需要有人安装？或者这不是web组件的预期用途？是。Web组件是一种“Javascript小部件” 通常，在Javascript文件中定义Web组件。然后，您可以使用元素将其包含在任何HTML中具有名为的最小自定义元素的示例：在hello world.js中： cust

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

是。Web组件是一种“Javascript小部件”

通常，在Javascript文件中定义Web组件。然后，您可以使用

元素将其包含在任何HTML中

具有名为

的最小自定义元素的示例：

在hello world.js中：

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

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

在主页index.html中：

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

<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页面

您可以检查角度元素，但为此需要编译的fileWeb组件是js文件。它不用于安装。可以作为一个普通的js文件添加到脚本文件中。这是一个很好的例子。