Перейти до вмісту

State of HTML 2025

Вебкомпоненти

Створення та використання вебкомпонентів.

Ми виокремлюємо нові функції або бібліотеки, про які, на нашу думку, вам варто знати.

Функція від нас: ElementInternals

If you write web components, you must have often needed to specify custom pseudo-classes, default ARIA parameters, or to make a component behave like a regular form element?

ElementInternals does all that, and more! The best part? It’s Widely Available, supported by all browsers since 2023!

База сумісності: Широко доступно

Дізнатися більше

Корисні джерела

Досвід використання і ставлення до вебкомпонентів

Once again we see declarative solutions prevailing, with declarative custom elements topping the sentiment chart.

Групувати за:

Сортувати за:

01
Вебкомпоненти
52.6%
35.8%
10.4%
4,457
02
Вебкомпоненти
46.9%
37.6%
14.9%
4,445
03
Вебкомпоненти
40%
43.7%
15.7%
4,437
04
Вебкомпоненти
31.4%
30.9%
37.4%
4,430
05
Вебкомпоненти
12.9%
34.2%
52.5%
4,404
06
Вебкомпоненти
9.9%
29.6%
60.2%
4,425
07
Вебкомпоненти
7.3%
17.4%
75%
4,387
08
Вебкомпоненти
5.9%
11.9%
81.8%
4,372
09
Вебкомпоненти
5.1%
15%
79.7%
4,366
10
Вебкомпоненти
4.8%
17.1%
77.6%
4,402
11
Вебкомпоненти
8.2%
89.9%
4,364

Досвід

  • Використовував(-ла): Респонденти, які це використовували.
  • Чув(-ла) про це: Респонденти, які чули про це, але не використовували.
  • Вперше чую: Респонденти, які не чули про це.

Ставлення

  • Позитивно: Респонденти, які зацікавлені у вивченні технології або хочуть використовувати її ще.
  • Нейтрально: Респонденти, які не висловили жодного ставлення до технології.
  • Негативно: Респонденти, які не зацікавлені у вивченні технології або використовували її і мали негативний досвід.
Середнє: "Використовував(-ла)":20%
Середнє: "Позитивно":24%
Середнє: "Негативно":7%

Проблеми вебкомпонентів

Які проблеми створення та використання вебкомпонентів найбільше вас розчаровують?
Множинний вибір
0%
20%
40%
60%
80%
100%
01
Надмірна складність
1,710
02
Проблеми надмірної залежності від JavaScript та SSR
1,225
03
Проблеми доступності
1,017
04
Розширення нативних елементів
784
05
Надто сувора інкапсуляція стилів
708
06
Доступ до токенів дизайну
486
07
Проблеми локалізації/інтернаціоналізації
352
08
Низька CSS-специфічність тіньового DOM
339
09
Додавання стилів до нащадків slotted-елементів
317
10
🚫 Нічого
313
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
3,232
52%
10

Інші проблеми вебкомпонентів

Compared with previous years the same themes are still present: high cognitive overhread, falling short when compared to framework components, and Shadow DOM being more of a problem than a solution.

Які ще проблеми створення та використання вебкомпонентів вас розчаровують?
Множинний вибір
Головні проблеми загалом.

Вигляд:

Елементи, що не є одним(-ою) із “limitations”
0%
20%
40%
60%
80%
100%
01
Cognitive overload
3
02
Ecosystem issues
1
03
2
04
Content
1
05
Styling & customization
1
06
Excessive complexity
07
Browser support
1
08
Education
3
09
Declarative APIs
10
Accessibility
11
Web Components extending built-in elements
12
Adoption & momentum
13
Slotting & Slots
2
14
Web Components styling & theming
2
15
Server-client communication
1
16
Reliance on JavaScript
17
Reactivity
1
18
Tooling
1
19
Loading & packaging
20
Loading
21
community
22
ElementInternals
23
Custom element attributes and props
1
24
Invalid/Spam
25
Form Submission
26
Інші відповіді
0%
20%
40%
60%
80%
100%
% від тих, хто відповів на питання
348
6%
25
5

Рекомендовані джерела

Vanilla JS: You Might Not Need a Framework
Maximiliano Firtman
Software Engineer & Educator

Vanilla JS: You Might Not Need a Framework

See how you can build rich web apps and websites without depending on libraries or frameworks, using only the core JavaScript language.
Спонсорований вміст від наших партнерів. Детальніше.