我应该如何向页面添加web组件

Question

我有一个组件<search-select>，它内部使用了另外两个web组件——<autocomplete-input>和<autocomplete-dropdown>。现在我把它们都添加到index.html中，如下所示：

<script src="./components/selection/SearchSelect.js"></script>
<script src="./components/selection/Autocomplete-input.js"></script>
<script src="./components/selection/Autocomplete-dropdown.js"></script>

但是，我是否应该将这2个<autocomplete-...>组件添加到它们的父级中(就像您在React或Vue中所做的那样(，而不是添加到它们父级旁边的index.html中？如果是，我该怎么做？

Answer 1

加载顺序无关紧要。何时或(从(哪里加载脚本并不重要
所有本机Web组件最终都在全局CustomElements注册表中
(我们将来可能会得到范围的注册表(

<my-component>下面是一个HTMLUnknownElement
(仍然是HTMLElement的子代！所以你可以像对待任何HTMLElement一样对待它(

单击后；元素被定义为，因此"；升级">所有现有实例
DOM或shadowDOM中的任何位置

这种现代JS魔法是nooldskool React、Vue、Angular或Svelte Component可以做到的。
在Frameworks中，您必须定义，然后才能使用组件。就像变量一样。

JSWC1

document.onclick = (evt) => {
customElements.define("my-component", class extends HTMLElement {
connectedCallback() {
this.innerHTML = "Yeah! I am defined now!";
}
});
}

my-component:not(:defined) {
cursor: pointer;
background: red;
color: white;
}
my-component:defined {
background: green;
color: gold;
}

<my-component>Hello World!</my-component>

注意：存在复制组件"；升级"；行为但由于它们运行在JavaScriptEngine中，它们永远无法实现现代JS性能，这在浏览器引擎中起到了神奇的作用。