Есть ли ограничение на количество веб-компонентов / пользовательских элементов, которые вы можете определить? - PullRequest
Новая
       13

Есть ли ограничение на количество веб-компонентов / пользовательских элементов, которые вы можете определить?

0 голосов
/ 15 марта 2020

Я создаю приложение ~ largi sh, содержащее около 50 компонентов (определения классов и вызовы window.customElements.define). Должен ли я быть обеспокоен тем, сколько я определяю? Может ли слишком много замедлять работу браузера Dom при разборе? Есть ли предел тому, сколько я могу определить?

1 Ответ

1 голос
/ 15 марта 2020

Вы не достигнете пределов с общими рекомендациями 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(fragment);
document.body.prepend(done, new Date() / 1 - startTime, " milliseconds")

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

Сравнение скорости немного бессмысленно ... мой Chrome с 30 + Расширения работают медленнее, чем мой Edge без каких-либо расширений.

Подумайте о (CSS) селекторах и пользовательских элементах

Я сделал 52 SVG игральных карт (в 16 Кб) с автономными элементами: 

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

Да! Великий Семанти c HTML ..

Но вы НЕ МОЖЕТЕ сделать частичные имя узла (CSS) селекторы

Так что в end single Автономный элемент:

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

имеет больше смысла, чтобы иметь возможность использовать CSS: 

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

и JavaScript: 

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