Lompat menuju konten

State of HTML 2025

Web Components

Membuat & memakai web components.

We're highlighting up-and-coming features or libraries we think you should know about.

Feature Highlight: 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!

Baseline: Widely Available

Learn more

Useful Resources

Fitur-fitur Web Component Lain

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

Kelompokkan berdasarkan:

Urutkan berdasarkan:

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

Pengalaman

  • <span aria-hidden="true">🤓</span> Sudah pakai: Responden yang sudah pakai.
  • <span aria-hidden="true">👀</span> Pernah dengar: Responden yang sudah dengar, tetapi belum pernah pakai.
  • <span aria-hidden="true">🤷</span> Belum pernah dengar: Responden yang belum pernah dengar.

Sentimen

  • Positif: Responden yang tertarik untuk belajar tentang sebuah teknologi; atau yang ingin menggunakannya lagi.
  • Netral: Responden yang tidak memiliki sentimen akan sebuah teknologi.
  • Negatif: Responden yang tidak tertarik untuk belajar tentang sebuah teknologi; atau yang sudah pernah pakai dan memiliki pengalaman negatif.
“Used” average:20%
“Positive” average:24%
“Negative” average:7%

Web Components Pain Points

What are your top pain points around making and using web components?
Multiple
0%
20%
40%
60%
80%
100%
01
Excessive complexity
1,710
02
Over-reliance on JavaScript & SSR issues
1,225
03
Accessibility issues
1,017
04
Extending native elements
784
05
Overly strict style encapsulation
708
06
Accessing design tokens
486
07
Localization/internationalization issues
352
08
Low shadow DOM CSS specificity
339
09
Slotted descendant styling
317
10
Tidak ada
313
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden
3,232
52%
10

Other Web Components Pain Points

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.

Any other pain points around making and using web components?
Multiple
Top pain point topics overall.

View:

Items that are not one of “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
Lainnya
0%
20%
40%
60%
80%
100%
% dari pertanyaan responden
348
6%
25
5

Rekomendasi Sumber

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.
Terima kasih kepada semua Mitra yang telah mendukung Kami! Pelajari lebih lanjut.