ネイティブのWebコンポーネントについて考えるのをやめられない理由の1つは、どこでも使用する方法です。 「増分採用」は派手なフレーズだと思います。
Codepenの新しい編集者でそれらを使用し始めたことさえ、私たちはいつか私たちが確信しているいくつかの興味深い問題を解決するためにまだ取り組んでいます。私たちはReact/Nextを使用していますが、これはWebコンポーネントのサポートでは有名ではありませんが、ほとんど問題ありません。他のJavaScriptフレームワークははるかに友好的であり、もちろんあなたが そうではありません JavaScriptフレームワークを使用して、世界では注意していません。 Webコンポーネントはあなたの世界の一部になります。
どこにでも滑りやすいので、Codepenで非常にうまく機能します。私 「スタンドアロン」のWebコンポーネントのリストに言及しました ここの先週はオルコーナーで、それから私は それらをペンに変換しました それを証明するために。多くのWebコンポーネントがnpmに公開されています。 esm.sh リソースを簡単にリンクすることができます。
上記のようなWebコンポーネントを使用することのクールな点は、それらが永遠に続くかもしれないということです。私はこれについて少し怒鳴りました マストドンで 先日。 Webコンポーネントの依存関係が少ないほど、長持ちします。確かに JavaScriptフレームワークを上回ります、ジェイク・ラザロフが言ったように：
5年、10年、さらには20年以内に作業にアクセスできるようにしたい場合は、その間にレイヤーなしでWebを使用する必要があります。すべてのwar贅について、このWebは、これまでに作成した中で最も回復力があり、ポータブルで、将来の将来のコンピューティングプラットフォームになりました。少なくとも、それを念頭に置いて構築すると。
それはかっこいいと思います。
私が投稿したデモについて何が壊れるかを考えさせます。たとえば、何が作られるのか このペン いつか働くのをやめますか？ Codepenがオフラインになった場合、そうなります。しかし、私たちはちょうど私たちを持っていました 12歳の誕生日 強くなっています。あなたはそれが起こるために私と死ぬまで私と戦わなければなりません。 Webコンポーネントはリンクされています esm.sh それで、それが下がった場合、それは動作を停止します。それは間違いなく可能です。このような無料のCDNのようなWebサイトが出入りするのを見てきました。しかし、別のものに変更することもできます。コードはnpmにあるので、それは死ぬか、著者がそれを引き下げることができます。しかし、そのリスクはあまりないようであり、それはオープンソースであるため、鏡が存在するでしょう。かなり回復力があります、私は言うでしょう！さまざまなプロジェクトには異なるニーズがありますが、それらの依存関係を減らすことで常に強くなる可能性があります。
ああ、ウェブコンポーネントと超クールなことについて話す…チェックアウト デビッド・ダーネス私たちだけのために新しいもの：
アイデアは、それが私たちを使用するための説得力のある方法だということです Prefill APIに投稿します。したがって、あなたはこのような著者のコードを著者にします：
<p>Hello world</p>:root { color: hotpink; }document.querySelector("p").style.backgroundColor = "orange";（または、Markdownトリプルバックテックを使用して、他のオプションの中でも、コードが逃げることを避けることができます）
次に、ユーザーがクリックして実際のペンでそのコードを開くことができる「Codepenで開く」ボタンを構築します。ポイントは通常、ドキュメントやブログの投稿のようなものです。 すべてのコードを自分で管理し、 テキストとペンの両方を個別に維持しないでください。デビッドに感謝します、これはとてもクールです。
デビッドは最近、無料の電子書籍を公開しました Webコンポーネントの場合 あなたがさらに確信したいと思っているかどうかをチェックしたいかもしれません。その中で、彼は「デザインシステム」のユースケースに言及しましたが、これは私にとってひどい大きなもののようです。最近、設計システムを作成している場合は、何でもしています 他の Webコンポーネントよりも奇妙に思えます。 Webコンポーネントは持続し、プロジェクトが進化するにつれてフレームワーク間で移動可能になります。
私たちが主題になっている間、雑草にもう少し入りましょう。
最終的に、Webコンポーネントはaです
classJavaScriptで。 aのような標準的な方法がありますconstructorクラスがインスタンス化されたときに呼び出されます。また、方法もありますconnectedCallbackWebコンポーネントがDOMに表示されたときに、Webコンポーネントの各インスタンスで実行されると実行されます。これは少しです 微妙な違いであり、かなりのゴッチャになる可能性があります、ノーラン・ローソンが言うように。コンポーネントが各インスタンスに固有のことをする必要がある場合、connectedCallback。 Webコンポーネントの真のパワーだと思います！たとえば、それはちょっと好きです イベント委任を無料で取得します。Webコンポーネントと呼ばれるアプローチがあります HTML Webコンポーネント 基本的に：
- 完全に受け入れられるHTMLをいくつか取ります
- aに巻き付けます
機能を拡張しますそれは楽しく、明らかに便利です（たとえば、Webコンポーネントを含むブログ投稿はRSSよりも正常にレンダリングされます）。それは関連していますが、まったく同じではありません 宣言的な影dom。レイモンド・カムデンはここで何か面白いものを探ります… Webコンポーネントは、その内部のHTMLが変更されたかどうかをどのようにして知りますか？ 残念ながら、プラットフォーム自体を除いて、これについては明らかなソリューションやヘルパーAPIはありません。トリックは、aを使用することです
MutationObserverそれ自体が内部的に変化を監視し、それからあなたがしなければならないことを何でもする。興味深いもの。私はすべてをdomから引き裂き、それを交換するように誘惑されますconnectedCallbackそれは、それが自分の変更を監視しているようにすべてのWebコンポーネントを作成するのではなく、そのことです。私はそれが私のために浮かんでいないので、私は以前にそのような変化を見ることについてあまり考えていませんでした。同様に、ベン・ナデルはそれを指摘します aの内容
いつでも変異させることができます、そして新しいコンポーネントがインスタンス化され、その新しいコンテンツが使用されます。それは私にとって理にかなっています。それは、私が通常コンポーネントをどのように考えているかのひねりです。テンプレートは、データを取得し、必要なことを行うこの静的なものだと思います。少ないほど、データに基づいて動的なテンプレート自体を考えます。
Be the first to comment
