跳到内容

State of HTML 2023

Web 组件

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

通过...分组：

根据此项排序:

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

经验

  • <span aria-hidden="true">🤓</span> 用过: 使用过此项目的受访者。
  • <span aria-hidden="true">👀</span> 有听说过: 听说过此项目，但没有使用过此项目的受访者。
  • <span aria-hidden="true">🤷</span> 没听说过: 从未听说过此项目的受访者。

情绪（态度）

  • 积极: 有兴趣了解此技术，或者愿意再次使用它的受访者
  • 中立: 未对此技术发表看法的受访者
  • 消极: 对此技术不感兴趣，或者使用此技术有糟糕体验的受访者
“Used” average:17%
“Positive” average:24%
“Negative” average:6%

其他 Web 组件功能

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

无

6,756
0%
11%
22%
33%
45%
56%
受访者百分比
12,114
58%
您使用过以下哪些 Web 组件功能？

Web 组件库

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%
受访者百分比
10,566
51%
您有使用过 Web 组件库吗？

使用 Web 组件的痛点

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

Styling & customization

2

Browser support

3

SSR

4

5

Framework compatibility

匹配“Framework compatibility”的答案 77
6

Reliance on JavaScript

7

Framework compatibility

8

Excessive complexity

9

Accessibility

10

Lack of documentation

11

其他答案

匹配“其他答案”的答案 1,147
0%
17%
35%
52%
69%
87%
受访者百分比
1,324
6%
在使用 Web 组件方面，您最大的痛点是什么？
(自由提问)

制作 Web 组件的痛点

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

其他答案

匹配“其他答案”的答案 1,613
0%
22%
43%
65%
87%
109%
受访者百分比
1,484
7%
在制作网络组件的过程中，您最大的痛点是什么？
(自由提问)

资源推荐

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!
感谢合作伙伴对我们的支持! 了解更多。