跳到内容

State of HTML 2023

[zh-Hans] general.back_to_intro

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.

features.web_components_main_features

通过...分组：

根据此项排序:

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> 没听说过: 从未听说过此项目的受访者。

情绪（态度）

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

其他 Web 组件功能

您使用过以下哪些 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

None

6,756
0%
11%
22%
33%
45%
56%
受访者百分比
12,114
58%

Web 组件库

您有使用过 Web 组件库吗？
0%
17%
35%
52%
70%
87%
1

782
2

384
3

232
4

135
5

126
6

92
7

37
8

None

9,232
0%
17%
35%
52%
70%
87%
受访者百分比
10,566
51%

使用 Web 组件的痛点

在使用 Web 组件方面，您最大的痛点是什么？
(自由提问)
0%
17%
34%
50%
67%
84%
1

Styling & customization

2

Framework compatibility

匹配“Framework compatibility”的答案 143
3

Browser support

4

SSR

5

6

Reliance on JavaScript

7

Excessive complexity

8

Accessibility

9

Lack of documentation

10

Lack of knowledge

0%
17%
34%
50%
67%
84%
受访者百分比
1,324
6%

制作 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

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