先週私 Webコンポーネントをリンクしました （公式のテクノロジーを参照するときに、キャプチャルWとキャプチャルCを実行する必要があるように感じますか？）それは画像を取得し、その「ディザード」バージョンを出力します。
なぜアンドリューはそれをWebコンポーネントにしたのですか？わかりませんが、どのように使用するかを確認してください。
- 1つのジョブを持つJavaScriptファイルをリンクします。Webコンポーネントのインスタンス化の使用。
- HTMLだけでWebコンポーネントを使用します。
のように…
それはただ…素敵なAPI！使いやすく、制御しやすいです。このアイデアは、他の多くの方法で開発され、提供された可能性がありますが、この方法はかなり良い気分です。 Webコンポーネントを使用すると、誰でもWeb上のどこでも使用できるデザインと機能を少し構築（実際に）構築（実際に分配）します。
まあ、私は言います どこでも、しかし、JavaScriptフレームワークを使用している場合、JavaScriptフレームワークがそれらでうまく機能する必要があります。チェックするのに適した場所はウェブサイトです どこでもカスタム要素 それにはテストがあります。有名な反応は、彼らにとって素晴らしいことではありません。そして、まあ、それらのサーバー側のレンダリングは少し難しいです。そして、アクセシビリティストーリーは少し面倒です。それらをスタイリングすることは私のお気に入りではありません。したがって、ストーリー全体がそれほど明確ではありません。
それでも、個人的には、私の脳はますますウェブコンポーネントのアイデアに到達します。私が作ったとき コンテナクエリ付きのカレンダー デモ、私はあなたがヒットするコンテナクエリのビューポート幅を変更する必要がないという事実を紹介する素晴らしい方法だと思いました。私は理解した これにはWebコンポーネントが必要です そしてもちろん、 ありました。
それでは、Webコンポーネントは、フレームワークに依存しない機能の小さなビットに使用されるように運命づけられていますか？多分！多分そうではない！ AdobeがWebコンポーネントを使用してWeb上のPhotoshopのアプリケーション全体を文字通り作成したことを割引することはできません。
…Photoshopアプリ全体は、LITベースのWebコンポーネントを使用して構築されています。ブラウザの組み込みコンポーネントモデルとシャドウDOMカプセル化に頼ると、チームは他のAdobeチームが提供するいくつかの「島」のReactコードを簡単に統合できることがわかりました。
彼らも一人ではありません。 eisenbergeffect's 2023 Webコンポーネントの状態 YouTube、MSN、Salesforce、SpaceXなどのWebコンポーネントでかなり大きくなっている大きな生産サイトの例から始まります。私はいつもかなり早い採用者のように感じたGithubについても考えています。
このすべてのWebコンポーネントのものを非常にトリッキーで微妙なものにしているのは、それらが単なるテクノロジーではなく、実際には非常に大きなテクノロジーのバケツであるということです。
クラシックは、Shadow Dom、カスタム要素、およびHTMLテンプレートです。しかし、その中でさえ、それらがどのように実装され、どのような進歩が彼らに来ているかの詳細は複雑です。 Eisenbergeffectの記事はかなり深く入り込んでいるので、この主題がどれほど広いかを理解するために他に何もない場合はチェックする価値があります。
CSSの人として、私は彼らのスタイリングストーリーに従うようにしています。 Shadow Domはそのストーリーが始まる場所であり、スタイルを非常に強く封じ込めるユニークな機能を提供します。しかし、どのようにしてCSSを入手しますか？あなたがすべてに手を伸ばすことができるように、あなたはすべてに特別なHTML属性を入れますか ::part セレクター？すべてにカスタムプロパティを入れて、外部から「手を差し伸べる」ためにスタイルを整えることができますか？ HTMLテンプレートにCSSのブロックを入れていますか？あなたは @import 内部からのCSS？彼ら全員に「はい」のようなものですが、あなたが私に尋ねると、そのすべてにも「🤢」のようなものです。しかし、その後、CSSへのより適切なプログラムアクセスを可能にするWebプラットフォームの勝利のように見える構成可能なスタイルシートと採用されたスタイルシートがあります。次に、CSSモジュールスクリプトを使用して、長い間バンドラーのみの異常であるJavaScriptでCSSを適切にインポートすることができます。そして、そのCSS宣言をするだけで、それを完全な円をもたらすかもしれません。 うーん！
実際のアイデアに戻ります 使用 これらのこと。 Brad Frostは、Webコンポーネントの仕事はJavaScriptフレームワークとはまったく対立していないと考えています。 （すべてのJavaScriptフレームワークが、設計と機能の分離されたビットである構成可能なコンポーネントを構築することを教えているので、私はいつもそれが公正な比較だと思っていました）。しかし、ブラッドは彼が有名な別の二分法に沿ってそれを分割します：
- Webコンポーネントは、最前線のコードを処理します （たとえば、ボタンのルックアンドフィール）
- JSライブラリ/フレームワークは、前端の背面コードを処理します （たとえば、ユーザーがそのボタンをクリックすると何が起こるか）
それがプルオフ可能であれば、それは私にとって合理的に聞こえます。いくつかの例を見なければなりません。私は、最も基本的なインタラクティブ性さえも考えています 「HTML」にフレームワーク固有のコードを入力することを意味しますが、ネイティブHTMLテンプレートとフレームワーク固有のHTML（JSXなど）の両方が関与しているため、それを解く方法は完全にはわかりません。
これまでのこの話はすべて、Webコンポーネントテクノロジー「RAW」、つまりWebプラットフォームAPIを直接使用することについてもあります。この世界の早い段階で、アイデア全体を形作ることの一部であり、APIはフレームワークの著者を中心に設計され、市民の平均的なWebサイトがAPIではなくWebコンポーネントの周りに抽象化を使用することを意図していると聞きました。それについてはほとんど先例がないので、それは私にとって野生の主張ですが、大丈夫です。
これらの抽象化の最初の波は、数kbのクライアント側ライブラリを犠牲にして物事をもう少し人間工学に基づいたものにしたライブラリでした。 点灯 有名なものです。 Webコンポーネントのインスタンス化が少し簡単になります。効率的に再レンダリングは初期の目的（WTF）ではなかったため、それを助けました。私がレイアウトしたように、スタイリングは荒いので、それは少し役立ちます。個人的には、私はあなたに少し素晴らしいものを買ったように見えたので、それに大きな惹かれませんでしたが、いくつかの新しいフレームワークにロックされていると感じるのに十分ではありませんでした（その時、より堅牢なJavaScriptフレームワークを選んだかもしれません）。
私たちは今、ウェブコンポーネントの次の波を見ていると思います。 webc そして 強化する。どちらもSSRを主要な機能にします。それは最初は奇妙な選択だと思っていましたが、それは素晴らしいものであり、すべての理由ではなかったようですが、Webコンポーネントが「勝ち」ではなかったようです。しかし、私はそれに近づいています。 SSRがこのように「解決」されると、他のソリューションが乗るためにやってくると思います。のように スタイリングは簡単になります。しかし、「これでサイト全体を構築するにはどうすればよいですか？」などのより大きな質問も解決します。データフェッチのアドバイスや実際のルーティングなどを含めることにより。
おそらく、Webコンポーネントの最もクラッチの部分は、始まりが不安定であったとしても、ストーリーがまだ完全に明確ではない場合でも、テクノロジーがブラウザに組み込まれており、ブラウザは素晴らしく長期的で後方互換性があることです。彼らは、Webコンポーネントのサポートをリッピングするだけではありません。時間の経過とともに良くなるだけです。
技術をもっと理解するのに助けが必要ですか？私はあなたを私の友人のデイブのコースに渡します 超大国を備えたHTML。
Views: 0
