创建一个注入 HTML 行并运行 JS 函数的简单 Web 组件

Question

我想制作一个 Web 组件，它只允许我运行一个简单的 JavaScript 功能。即它会起作用，以下两个代码将以相同的方式起作用：

<body>
   <div id="sample"></div>
   <script> createSample(); </script> 
</body>

和

<body>
   <my-web-component></my-web-component>
</body>

我曾尝试阅读一些创建 Web 组件的在线指南，但我对在 JavaScript 中的实际工作和一般 Web 环境中的工作还比较陌生，所以大部分内容都在我脑海中浮现。有什么简单的方法可以做我描述的事情吗？感谢您的帮助！

Answer 1

您就快完成了，为了扩展您的实施，我们可以使用基本 Javascript 创建自定义 HTML 组件，使用 HTMLElement interface. Also, take a look in the HTML living standard specification 获取更多示例和实施。

例如，我们可以先在Javascript中定义新的自定义组件及其功能（这可以在您的HTML中的标签中或在单独的外部js文件中完成）。

class MyComponent extends HTMLElement {
    connectedCallback() {
      this.innerHTML = `<h1>Hello world</h1>`;
    }
  }
  
  customElements.define('my-web-component', MyComponent);

<body>
   <my-web-component></my-web-component>
</body>

最后，在 HTML 文件中定义组件，如果您使用外部文件来放入 Javascript 片段，请不要忘记包含 js 文件。当Javascript 片段在页面加载时执行，它创建自定义组件并将其呈现到页面。

创建一个注入 HTML 行并运行 JS 函数的简单 Web 组件

Creating a simple web component that injects a HTML line and runs a JS function

javascript

web-component

native-web-component