跳到内容

State of HTML 2025

Web 组件

制作和使用 Web 组件

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

Feature Highlight: ElementInternals

The ElementInternals API recently became widely available, which makes it a perfect complement to existing web components features.

Baseline: Widely Available

Learn more

Useful Resources

其他 Web 组件功能

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

通过...分组：

根据此项排序:

1
Web 组件
52.6%
35.8%
10.4%
4,457
2
Web 组件
46.9%
37.6%
14.9%
4,445
3
Web 组件
40%
43.7%
15.7%
4,437
4
Web 组件
31.4%
30.9%
37.4%
4,430
5
Web 组件
12.9%
34.2%
52.5%
4,404
6
Web 组件
9.9%
29.6%
60.2%
4,425
7
Web 组件
7.3%
17.4%
75%
4,387
8
Web 组件
5.9%
11.9%
81.8%
4,372
9
Web 组件
5.1%
15%
79.7%
4,366
10
Web 组件
4.8%
17.1%
77.6%
4,402
11
Web 组件
8.2%
89.9%
4,364

经验

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

情绪（态度）

  • 积极: 有兴趣了解此技术，或者愿意再次使用它的受访者
  • 中立: 未对此技术发表看法的受访者
  • 消极: 对此技术不感兴趣，或者使用此技术有糟糕体验的受访者
“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%
1
Excessive complexity
1,710
2
Over-reliance on JavaScript & SSR issues
1,225
3
Accessibility issues
1,017
4
Extending native elements
784
5
Overly strict style encapsulation
708
6
Accessing design tokens
486
7
Localization/internationalization issues
352
8
Low shadow DOM CSS specificity
339
9
Slotted descendant styling
317
10
无
313
0%
20%
40%
60%
80%
100%
受访者百分比
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%
1
Cognitive overload
3
2
Ecosystem issues
1
3
2
4
Content
1
5
Styling & customization
1
6
Excessive complexity
7
Browser support
1
8
Education
3
9
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

资源推荐

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