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

Web Components

Web Componentsの作成と使用

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 Component機能

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

グループ化:

ソート基準:

1
Web Components
52.6%
35.8%
10.4%
4,457
2
Web Components
46.9%
37.6%
14.9%
4,445
3
Web Components
40%
43.7%
15.7%
4,437
4
Web Components
31.4%
30.9%
37.4%
4,430
5
Web Components
12.9%
34.2%
52.5%
4,404
6
Web Components
9.9%
29.6%
60.2%
4,425
7
Web Components
7.3%
17.4%
75%
4,387
8
Web Components
5.9%
11.9%
81.8%
4,372
9
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.
Web Componentsの作成と使用に関する主な問題点は何ですか?
Multiple
0%
20%
40%
60%
80%
100%
1
過度な複雑さ
1,710
2
JavaScriptへの過度な依存とSSRの問題
1,225
3
アクセシビリティの問題
1,017
4
ネイティブ要素の拡張
784
5
過度に厳格な、スタイルカプセル化
708
6
デザイントークンへのアクセス
486
7
ローカライゼーション/国際化の問題
352
8
Shadow DOMのCSS詳細度の低さ
339
9
スロット化された子孫要素のスタイリング
317
10
🚫 該当なし
313
0%
20%
40%
60%
80%
100%
回答数に占める割合(%)

その他の問題点

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%
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%
回答数に占める割合(%)

おすすめのリソース

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!
パートナーのサポートに感謝しています! 詳細をみる。