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

Question

Can I build my JavaScript application to single bundle file including Web Components and link it to end of body ?我可以将我的 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>

Answer 1

It does NOT matter WHEN the customeElements.define() script is executed执行customeElements.define()脚本时无关紧要

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

Custom elements can be used before their definition is registered.可以在注册定义之前使用自定义元素。

Progressive enhancement is a feature of custom elements.渐进增强是自定义元素的一个特性。
You can declare a bunch of elements on the page and never invoke customElements.define('my-element', ...) until much later.您可以在页面上声明一堆元素customElements.define('my-element', ...)直到很久以后才调用customElements.define('my-element', ...) 。
This is because the browser treats potential custom elements differently thanks to unknown tags .这是因为由于未知标签，浏览器会以不同的方式对待潜在的自定义元素。
The process of calling define() and enriching an existing element with a class definition is called "element upgrades" .调用define()并使用类定义丰富现有元素的过程称为“元素升级” 。

You can load/inject/execute script anytime:您可以随时加载/注入/执行脚本：

 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>

Answer 2

Script can be loaded any where in html.脚本可以在 html 中的任何位置加载。 However, It is suggested to before body inside head with defer attribute statement.但是，建议在head body 之前加上defer 属性声明。

The defer attribute is a boolean attribute. When present, it specifies that the script is executed when the page has finished parsing.

Basic def: https://w3schools.com/tags/att_script_defer.asp基本定义： https : //w3schools.com/tags/att_script_defer.asp

There few more supporting docs and best practice can be found可以找到更多的支持文档和最佳实践

https://developers.google.com/web/fundamentals/web-components/customelements https://developers.google.com/web/fundamentals/web-components/customelements

<script defer src="main.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Life cycle callbacks test</title>
    <script defer src="main.js"></script>
  </head>
  <body>
    <h1>Life cycle callbacks test</h1>

  </body>
</html>

Look at the example:'看例子：'

https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/index.html https://github.com/mdn/web-components-examples/blob/master/life-cycle-callbacks/index.html

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-03-29 12:26:04

解决方案2
1 2020-03-29 06:04:19

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-03-29 12:26:04

解决方案2 1 2020-03-29 06:04:19

解决方案1
2 已采纳 2020-03-29 12:26:04

解决方案2
1 2020-03-29 06:04:19