跳到内容

State of HTML 2025

Web 组件

制作和使用 Web 组件

我们重点介绍我们认为您应该了解的有趣特性或库。

特性亮点: ElementInternals

如果你编写 Web 组件，你一定经常需要指定自定义伪类、默认 ARIA 参数，或者使组件像常规表单元素一样行为？

ElementInternals 可以做到这一切，甚至更多！最好的部分？它广泛可用，自 2023 年以来所有浏览器都支持！

基准: 广泛可用

了解更多

有用资源

其他 Web 组件功能

我们再次看到声明性解决方案盛行，声明性自定义元素位居情绪榜首。

通过...分组：

根据此项排序:

01
Web 组件
52.6%
35.8%
10.4%
4,457
02
Web 组件
46.9%
37.6%
14.9%
4,445
03
Web 组件
40%
43.7%
15.7%
4,437
04
Web 组件
31.4%
30.9%
37.4%
4,430
05
Web 组件
12.9%
34.2%
52.5%
4,404
06
Web 组件
9.9%
29.6%
60.2%
4,425
07
Web 组件
7.3%
17.4%
75%
4,387
08
Web 组件
5.9%
11.9%
81.8%
4,372
09
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> 没听说过: 从未听说过此项目的受访者。

情绪（态度）

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

Web 组件痛点

您在制作和使用 Web 组件方面最大的痛点是什么？
多选
0%
20%
40%
60%
80%
100%
01
过于复杂
1,710
02
过度依赖 JavaScript 和 SSR 问题
1,225
03
无障碍问题
1,017
04
扩展原生元素
784
05
过于严格的样式封装
708
06
访问设计令牌
486
07
本地化/国际化问题
352
08
Shadow DOM CSS 特异性低
339
09
插槽后代样式
317
10
无
313
0%
20%
40%
60%
80%
100%
受访者百分比
3,232
52%
10

其他 Web 组件痛点

与往年相比，同样的主题仍然存在：高认知开销、与框架组件相比不足，以及 Shadow DOM 更多的是问题而不是解决方案。
制作和使用 Web 组件方面还有其他痛点吗？
多选
总体上最主要的痛点主题。

视图:

不为“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
其他答案
0%
20%
40%
60%
80%
100%
受访者百分比
348
6%
25
5

资源推荐

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