如何创建可注入HTML并执行JS函数的简单Web Component

你不需要复杂的前端开发环境或工具链，直接在HTML文件中写入以下代码即可实现需求，全程零额外配置。

完整可运行示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义组件示例</title>
  <!-- 这里可以是你原有createSample函数的定义，或者引入外部JS文件的代码 -->
  <script>
    // 仅作示例，替换为你实际的createSample函数实现即可
    function createSample() {
      const el = document.getElementById('sample')
      el.textContent = '这是createSample生成的内容'
      el.style.color = 'red'
    }
  </script>

  <!-- 自定义组件定义代码，只需要写一次 -->
  <script>
    class MyWebComponent extends HTMLElement {
      // 组件插入到页面时自动执行该方法
      connectedCallback() {
        // 1. 生成你需要的HTML结构：等价于原来的<div id="sample"></div>
        const sampleDiv = document.createElement('div')
        sampleDiv.id = 'sample'
        this.appendChild(sampleDiv)

        // 2. 调用你原来的JS函数
        createSample()
      }
    }
    // 注册组件，组件名必须包含至少一个短横线
    customElements.define('my-web-component', MyWebComponent)
  </script>
</head>
<body>
  <!-- 直接使用组件标签即可，和你原来的写法效果完全一致 -->
  <my-web-component></my-web-component>
</body>
</html>

可调整说明 #

• 如果你的原有HTML结构更复杂，只要把创建元素的逻辑都写到connectedCallback方法里即可
• 如果需要修改组件名，只要改customElements.define的第一个参数，同时页面里的标签名和它保持一致即可，注意组件名必须包含至少一个短横线
• 如果你把createSample函数写在外部JS文件里，请确保外部JS的引入代码放在组件定义代码的前面，保证函数调用时已经加载完成

兼容性说明 #

所有主流现代浏览器（Chrome、Edge、Firefox、Safari 10.1+）都原生支持该写法，不需要额外引入兼容代码。

内容的提问来源于stack exchange，提问作者Noam I.