时间戳

首页 > 解决方案 > 可以在 HTML 正文的末尾注册 Web 组件（JavaScript 原生）吗？

javascript - 可以在 HTML 正文的末尾注册 Web 组件（JavaScript 原生）吗？

问题描述

我可以将我的 JavaScript 应用程序构建为包含 Web 组件的单个捆绑文件并将其链接到末尾body吗？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My application</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <!-- must work -->
    <local-example_component></local-example_component>

    <!-- includes "local-example_component" implementation -->
    <script src="Application.js"></script>
  </body>
</html>

标签： javascriptweb-component

解决方案

customeElements.define()脚本何时执行并不重要

来源：
https ://developers.google.com/web/fundamentals/web-components/customelements#upgrades

可以在注册定义之前使用自定义元素。

渐进增强是自定义元素的一项功能。
您可以在页面上声明一堆元素，customElements.define('my-element', ...)直到很久以后才调用。
这是因为由于未知标签，浏览器会以不同的方式处理潜在的自定义元素。
使用类定义调用define() 和丰富现有元素的过程称为 “元素升级”。

您可以随时加载/注入/执行脚本：

  function upgrade() {
    customElements.define('my-element', class extends HTMLElement {
      connectedCallback() {
        this.innerHTML = this.nodeName + ' defined!!';
      }
    })
  }
  body {
    font-family: Arial;
    font-size: 1.5em;
  }

  *:not(:defined) {
    color: red;
  }

  my-element {
    color: green;
  }
<my-element>&lt;my-element>unknown Element&lt;/my-element></my-element>
<br>
<button onclick="upgrade()">
  Upgrade
</button>

推荐阅读