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

【问题标题】：Creating a simple web component that injects a HTML line and runs a JS function创建一个简单的 Web 组件，注入 HTML 行并运行 JS 函数
【发布时间】：2021-09-02 09:13:28
【问题描述】：

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

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

和

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

我已经尝试阅读一些创建 Web 组件的在线指南，但我对在实用和一般 Web 环境中使用 JavaScript 工作相对较新，所以它大部分都超出了我的想象。有什么简单的方法可以做我所描述的吗？感谢您的帮助！

【问题讨论】：

我在 Dev.to 上发布了一堆基本示例。见：jsfiddle.net/WebComponents/62f1eLay
非常感谢！

标签： javascript web-component native-web-component

【解决方案1】：

你快到了，为了扩展你的实现，我们可以使用基本的 Javascript 来创建自定义 HTML 组件，使用 HTMLElement interface。另外，请查看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 sn-p，请不要忘记包含 js 文件。当 Javascript sn-p 在页面上执行时加载时，它会创建自定义组件并将其呈现到页面。

【讨论】：

谢谢，这正是我一直在寻找的！