时间戳

首页 > 解决方案 > 您可以定义的 Web 组件/自定义元素的数量是否有限制？

web-component - 您可以定义的 Web 组件/自定义元素的数量是否有限制？

问题描述

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

标签： web-component

解决方案

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

走极端

这是 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/

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

考虑一下（CSS）选择器和自定义元素

我做了 52张带有自治元素的SVG 扑克牌（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 ..

但是你不能做部分nodeName (CSS) 选择器

所以最后一个自治元素：

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

更有意义的是，能够使用 CSS：

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

和 JavaScript：

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

推荐阅读