Web Components

HTML ＞ Web Components

推移

　状態:調査中 　閲覧数:763 　投稿日:2015-09-21 　更新日:2015-09-21
2011年
・Alex Russell が、Fronteers Conference 2011 で、Web Components の概念を初めて発表

2013年
・Googleは、Web Components をベースとするフレームワーク、Polymer をリリース

現状
・Web Components に対応したブラウザはChromeしかない
・Polyfill があっても、大半のブラウザでサポートしない限り、Web Components はコミュニティに受け入れられない

予想
・仕様が固まるのは、ES6モジュールAPI 普及終了後？



・Web Componentsの現状

・Web Componentsの基本的な使い方・まとめ

Twitter検索結果。「Web Components」に関する最新ツイート

shinri@四間飛車検討室　@shogishinri
「Web Components」という「HTMLタグを自作する仕組み」が面白い。例えば<shogi-board>というタグ作って図面を出力できるようにする、とかが出来たりする。　2021/08/02 05:08
n.a/nazz　@nazz2017n
waterfoxでPIXIV FANBOXが全く表示されない、BOOTHの表示がおかしくなる問題やっと解決した・・・ about:configで、dom.webcomponents.enabled を true に変えればいいらしい。 FireFox系でのWeb ComponentsのShadow DOM、Custom Elementsとかの話？？？ この辺は門外漢だからさっぱり判らん。　2021/07/31 02:43
近藤(祥)【9時0分自宅なう。起きてるよ！部屋24.4℃、外22.4℃】　@shoko3168
@igrep 言葉足らずでした！ ちょうど昨日、SalesforceのLightning Webコンポーネントを作るためにSalesforce DX環境作ったんですが、 2手順目でVSCodeの拡張機能入れる手順があったのでそれのことかなと思っちゃいました！（タイムリー） https://t.co/RrJ7Pd9IAA　2021/07/30 15:25
yuki☃🌨　@yuki82511988
むっず これカスタム項目でやるってだいぶきついな https://t.co/wcPhYimmhk　2021/07/29 21:35
yuki☃🌨　@yuki82511988
@Trailhead で Lightning Web コンポーネントの基本 バッジを獲得しました。あなたも獲得しましょう! https://t.co/EoPGdSOWqm　2021/07/28 17:07
yuki☃🌨　@yuki82511988
やっぱり言語英語にしないと合格しないな @Trailhead で クイックスタート: Lightning Web コンポーネント バッジを獲得しました。あなたも獲得しましょう! https://t.co/Wubv1s1DTI　2021/07/28 16:45
yuki☃🌨　@yuki82511988
@Trailhead で Lightning Web コンポーネント開発者ツールの設定 バッジを獲得しました。あなたも獲得しましょう! https://t.co/TYfivERKfF　2021/07/28 16:24
70_10　@70_10
https://t.co/RY05GZn8OL これでいうところのIntegration TestをWeb Componentsではどうやって書けばいいんだろうか　2021/07/26 23:12
70_10　@70_10
Web Componentsをテストするにはブラウザ立ち上げるしかないのかなあ　2021/07/26 22:40
70ki8suda　@70ki8suda
CSS modules(css-loader)はweb標準のCSS moudlesでimport styles from './html5Element.css'; みたいにインポートして既存のcssでそのままshadowDOMにインジェクトできるからOK styled-componentsもCustom Elements風にタグ書けて、そのタグがそのままWeb Componentsで再利用できそうだからいい感じ　2021/07/26 18:37
70ki8suda　@70ki8suda
まーた、TailwindCSSが議論巻き起こしてるのかな‥。 TailwindCSSの賛否はおいといて、 ShadowDOM+CSS modules(web標準)によるスコープ付きCSSの時代がくるのを前提にして移行コストを考えると、考慮に値するのはCSS modules(css-loader) or styled-componentsの二択かなと今思っていて、（続く　2021/07/26 18:35
santec　@santec_japan
空間光変調器（SLM）の製品ラインナップ紹介動画を公開しました。 デモ機を用意しておりますのでご興味をもっていただけたら弊社Webよりお問い合わせください。 https://t.co/BVC6rDk2ZY https://t.co/YgtGuCpCEe　2021/07/26 15:50
mhidaka@DroidKaigi　@mhidaka
技術書典オンラインマーケットで株式会社ミクシィの「mixi tech note #06」を購入しました！ #技術書典 https://t.co/IVSnLhBHel Web Componentsの話が気になりました！（無料です）　2021/07/25 13:05

Virtual DOM ／ 擬似要素 ／ Shadow DOM の違いが分からない



類似度ページランキング
順位 ページタイトル抜粋 ％
1 Crescent Eve 46
2 Awesome Screenshot 44
3 Font Awesome 4.7.0 44
4 XnConvert 43
5 font-size 43
6 SCSS × Windows 43
7 Font Awesome v5.0.8 42
8 Responsive Glid 41
9 Bookmark Sentry 41
10 History Disabler 40
11 Bootstrap 4 40
12 Bootstrap 3 40
13 Material Design Colors 39
14 _notesフォルダ削除 38
15 Inkscape 36
16 transformプロパティ 36
17 inputタグのsize属性 36
18 Adobe Camera Raw 4.0 35
19 「Create Link」復活 34
20 Twitter Bootstrap 1.4 34
2021/8/02 9:35 更新
週間人気ページランキング ／ 7-26 → 8-1
順位 ページタイトル抜粋 アクセス数
1 画面キャプチャ | Chrome 拡張機能(ブラウザ) 51
2 RGB ⇔ Lab | 色変換(色) 46
3 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | 色 31
4 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
5 RGBの種類 ／ ビットカラー | RGB(色) 24
6 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 23
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 21
8 Design 0 20
9 「bgcolor」「background-color」「background」の違い | CSS 15
10 コズミックブルーが何色か分からない | 色 12
10 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 12
11 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 11
11 HSLとHSVの違い | 色変換(色) 11
12 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 10
13 キャラクター無料着せ替えジェネレーター Rinmaru Games ／ オンラインサービス | イラスト素材(デザイン) 9
13 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 9
13 アドベンチャーゲーム系の素材をどうやって用意するの？ | イラスト素材(デザイン) 9
13 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 9
13 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
14 黒体 ／ 色温度 ／ D65（6500K）／ D50（5000K）／ K | 色 8
2021/8/2 1:01 更新