您可以定义多少 Web 组件/自定义元素？

Question

我正在构建一个大约有 ~50 个组件（class 定义和 window.customElements.define 调用）的大型应用程序。我需要关心我定义的数量吗？太多会减慢浏览器 Dom 解析速度吗？我可以定义的数量有限制吗？

Answer 1

一般 DOM 建议不会达到限制：

https://developers.google.com/web/tools/lighthouse/audits/dom-size
总共最多 1,500 个节点。
深度不超过 32 个节点。
没有超过 60 个子节点的父节点。

走向极端

这里有 5000 个自定义元素，全部嵌套：

let startTime = new Date() / 1;
let fragment = new DocumentFragment();
let nested = fragment;
let name, nr = 5000;
let done = `${nr} elements done in `;
do {
  name = "e-" + nr;
  customElements.define(name, class extends HTMLElement {
    connectedCallback() {
      this.append(this.nodeName);
    }
  });
  nested = nested.appendChild(document.createElement(name));
} while (--nr);
document.body.append(done, new Date() / 1 - startTime, " milliseconds  ", fragment)

JSFiddle：https://jsfiddle.net/CustomElementsExamples/0pda48cb/

比较速度有点无意义...我的 Chrome 有 30 多个扩展比我的 Edge 没有任何扩展慢。

考虑 (CSS) 个选择器和自定义元素

我用自治元素做了 52 SVG playing cards（16 Kb）：

<two-of-hearts></two-of-hearts>
<ten-of-hearts></ten-of-hearts>
<ace-of-hearts></ace-of-hearts>
...
<ace-of-spades></ace-of-spades>

是啊！很棒的语义 HTML..

但是你不能partial nodeName (CSS) 选择器

所以最后一个单个自治元素：

<playing-card is="ace-of-hearts"></playing-card>

更有意义，能够使用 CSS:

 [is*="hearts"]{
  border : 2px solid green;
 }

和JavaScript：

  let aces = document.querySelectorAll('[is*="ace"]');

您可以定义多少 Web 组件/自定义元素？

Is there a limit to how many web components / custom elements you can define?

web-component

走向极端

考虑 (CSS) 个选择器和自定义元素