Lompat menuju konten

State of HTML 2023

Web Components

Despite JavaScript frameworks being used more widely than ever, there is still a need for native solutions. Yet Web Components currently fall short of addressing developer pain points effectively, with Web Components APIs and especially Shadow DOM dominating the top 10 of worst experiences across all HTML-related technologies.

This indicates that there is still significant work to be done before they can truly enhance HTML's extensibility and become a strong alternative to framework components. However, the ongoing activity in this area leaves me hopeful.

Web Components Experience & Sentiment

Kelompokkan berdasarkan:

Urutkan berdasarkan:

1

42.9%
36.2%
20.7%
13,553
2

37.7%
28.1%
33.9%
13,575
3

32.5%
40.3%
26.9%
13,515
4

27.2%
45.3%
27.2%
13,489
5

22.6%
26.7%
50.4%
13,405

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:17%
“Positive” average:24%
“Negative” average:6%

Fitur-fitur Web Component Lain

0%
11%
22%
33%
45%
56%
1

<slot> element

4,109
2

2,610
3

CSS ::part() pseudo-element

1,621
4

::slotted() CSS pseudo-element

1,198
5

customElements.get()

1,111
6

1,110
7

customElements.getName()

916
8

customElements.whenDefined()

649
9

Tidak ada

6,756
0%
11%
22%
33%
45%
56%
% dari pertanyaan responden
12,114
58%
Yang manakah dari fitur-fitur web component berikut yang pernah anda gunakan?

Pustaka Web Components

0%
18%
36%
55%
73%
91%
1

782
2

3

384
4

232
5

6

135
7

126
8

92
9

10

0%
18%
36%
55%
73%
91%
% dari pertanyaan responden
10,566
51%
Pernahkah anda menggunakan pustaka Web Components?

Titik sakit menggunakan Web Components

0%
17%
35%
52%
69%
87%
1

Styling & customization

2

Browser support

3

SSR

4

5

Framework compatibility

Jawaban yang cocok dengan “Framework compatibility” 77
6

Reliance on JavaScript

7

Framework compatibility

8

Excessive complexity

9

Accessibility

10

Lack of documentation

11

Lainnya

Jawaban yang cocok dengan “Lainnya” 1,147
0%
17%
35%
52%
69%
87%
% dari pertanyaan responden
1,324
6%
Apa saja titik sakit terbesar anda dalam menggunakan web components?
(Pertanyaan bebas)

Titik sakit membuat Web Components

0%
22%
43%
65%
87%
109%
1

Browser support

2

3

Styling & customization

4

Excessive complexity

5

Reliance on JavaScript

6

Excessive boilerplate

7

SSR

8

Accessibility

9

Excessive verbosity

10

Lack of documentation

11

Lainnya

Jawaban yang cocok dengan “Lainnya” 1,613
0%
22%
43%
65%
87%
109%
% dari pertanyaan responden
1,484
7%
Apa saja titik sakit terbesar anda dalam membuat web components?
(Pertanyaan bebas)

Rekomendasi Sumber

Web Components
Dave Rupert
Paravel

Web Components

Learn where to find excellent Web Components to build web apps. You’ll also learn how to create your own custom components using JavaScript and libraries like Lit that will help you make them faster!
Terima kasih kepada semua Mitra yang telah mendukung Kami! Pelajari lebih lanjut.