メインコンテンツにスキップ

State of HTML 2025

Web Components

Web Componentsの作成と使用

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

Feature Highlight: ElementInternals

If you write web components, you must have often needed to specify custom pseudo-classes, default ARIA parameters, or to make a component behave like a regular form element?

ElementInternals does all that, and more! The best part? It’s Widely Available, supported by all browsers since 2023!

Baseline: Widely Available

Learn more

Useful Resources

その他のWeb Component機能

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

グループ化:

ソート基準:

01
Web Components
52.6%
35.8%
10.4%
4,457
02
Web Components
46.9%
37.6%
14.9%
4,445
03
Web Components
40%
43.7%
15.7%
4,437
04
Web Components
31.4%
30.9%
37.4%
4,430
05
Web Components
12.9%
34.2%
52.5%
4,404
06
Web Components
9.9%
29.6%
60.2%
4,425
07
Web Components
7.3%
17.4%
75%
4,387
08
Web Components
5.9%
11.9%
81.8%
4,372
09
Web Components
5.1%
15%
79.7%
4,366
10
Web Components
4.8%
17.1%
77.6%
4,402
11
Web Components
8.2%
89.9%
4,364

Experience

  • <span aria-hidden="true">🤓</span> 使ったことがある: Respondents who have used an item.
  • <span aria-hidden="true">👀</span> 知っている: Respondents who have heard about an item, but haven't used it.
  • <span aria-hidden="true">🤷</span> 知らない: Respondents who have never heard about an item.

Sentiment

  • Positive: Respondents who are interested in learning more about a technology; or are willing to use it again.
  • Neutral: Responents who did not indicate any sentiment about a technology.
  • Negative: Respondents who are not interested in learning more about a technology; or have used it and had a negative experience.
“Used” average:20%
“Positive” average:24%
“Negative” average:7%

問題点

Web Componentsの作成と使用に関する主な問題点は何ですか？
Multiple
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

その他の問題点

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.

Web Componentsの作成と使用に関するその他の問題点はありますか？
Multiple
Top pain point topics overall.

View:

Items that are not one of “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.
パートナーのサポートに感謝しています！ 詳細をみる。