私の最後の記事では、Webコンポーネントが見かけほど怖くないことがわかりました。私たちは非常にシンプルなセットアップを見て、カスタム
これがすべて一緒になった方法です。
それはクールでとても楽しかったです（とにかく楽しかったです...）が、このアイデアをさらに一歩進めてインタラクティブにすることでさらに一歩進んだらどうなります。私たちのゾンビのプロファイルは素晴らしいですが、これはあなたが望む、ゾンビを「好き」にしたり、メッセージにメッセージを送ったりするのに役立つ、黙示録的なデートの経験になるためです。それがこの記事で私たちがやろうとしていることです。別の記事のスワイプを残します。 （左のスワイプはゾンビに適したものでしょうか？）
この記事では、Webコンポーネントに関する基本レベルの知識を想定しています。コンセプトが初めての場合、それはまったく問題ありません。前の記事では、必要なものをすべて提供する必要があります。どうぞ。それを読んでください。待ちます。 * Twiddles親指*準備ができましたか？わかった。
1秒間一時停止し（大丈夫、多分長く）、:: slotted（）pseudo要素を見てみましょう。前回の記事が出た後（ありがとう、ローズ！）、それは私が遭遇したカプセル化の問題のいくつか（すべてではないが）を解決した後に私の注意を喚起しました。思い出すと、コンポーネントのの外側にCSSスタイルがあり、内の
しかし、それは::スロットが出てくる場所です。次のように、セレクターの要素を宣言します。
:: slotted（img）{
幅：100％;
最大幅：300px;
高さ：自動;
マージン：0 1EM 0 0;
}これで、任意のスロットに配置された要素が選択されます。これは非常に役立ちます！
しかし、これは私たちのカプセル化の苦労のすべてを解決しません。スロットで直接選択することはできますが、スロット内の要素の子孫を選択することはできません。したがって、ゾンビプロファイルの興味のあるセクションのように、子供がいるスロットがある場合、
したがって、それは完璧ではありませんが、:: slottedは実際に私たちが以前よりも多くのカプセル化を提供します。これがそれを反映するために更新された出会い系サービスは次のとおりです。
私が最初にやりたいことは、物事を盛り上げるために少しアニメーションを追加することです。ゾンビプロフィールの写真を吹き飛ばして、積み重ねて翻訳しましょう。
私が最初にこれを試みたとき、私はIMGと::スロット（IMG）セレクターを使用して、画像を直接アニメーション化しました。しかし、私が得たのはサファリのサポートだけでした。 ChromeとFirefoxは、スロットされた画像でアニメーションを実行しませんでしたが、デフォルトの画像は正常にアニメーション化されました。それを機能させるために、私は.picクラスでdivにスロットを巻き付け、代わりにdivにアニメーションを適用しました。
.pic {
アニメーション：picfadein 1s 1s ease-in forwars;
変換：Translatey（20px）;
不透明：0;
}
@keyframes picfadein {
{Opacity：0;変換：Translatey（20px）; }
{不透明：1;変換：翻訳（0）; }
}そのかわいいゾンビを「好き」にするのは何かではないでしょうか？もちろん、ユーザーの観点から意味します。それは、少なくともオンラインデートサービスが持つべきもののようです。
クリック時にハートアニメーションを開始するチェックボックス「ボタン」を追加します。 .info divの上部にこのHTMLを追加しましょう：
like
これが私が一緒に引っ張った心のsvgです。私たちはゾンビが物事がひどいものであることを愛していることを知っているので、彼らの心はシャルトリューズの目の焼けた色合いになるでしょう：
<svg viewbox="0 0 160 135" xmlns="http://www.w3.org/2000/svg" fill-rule="vevodd" lip-rule="vevodd" stroke-linejoin="round" stroke-miterlimit="2"> <path d="m61 12V0H25V12H12V13H0V36H12V13H13V12H12V12H12V12H12V13H13V12H12V-12H13V-13H11V98H13V86H-1 13V74H12V61H12V25H-12V12H-12V0H98V12H85V13H74V12H61Z " fill="＃7AFF00 "></path> </svg>
テンプレートの
#trigger：checked .likebtn {
/* .likebtnの状態を確認しました。チェックされていない状態の前景/背景色をひっくり返します。 */
バックグラウンドカラー：＃960B0B;
色：#fff;
}
#trigger {
/*ラベルが属性を使用して入力に接続された状態で、ラベルのチェック/チェックを[ボックスのチェック]をクリックして、チェックボックスを削除できるようにします。 */
表示：なし;
}
。心臓 {
/ *心を開始してください。
変換：スケール（0.0001）;
}
@keyframes heartanim {
/ *ハートアニメーション */
0％{変換：スケール（0.0001）; }
50％{変換：スケール（1）; }
85％、100％{変換：スケール（0.4）; }
}
#trigger：checked〜.heart {
/ *チェックボックスをチェックすると、アニメーションが開始されます */
アニメーション：1S Heartanim Ease-In-Out Forwards;
}そこにはほとんど標準的なHTMLとCSSがあります。派手なものやしっかりとWebコンポーネントのように。しかし、ねえ、それはうまくいきます！そして、それは技術的にはチェックボックスであるため、ゾンビと同じように「似ている」のと同じくらい簡単に「ゾンビ」です。
あなたが交流する準備ができている黙示録的なシングルであり、性格と興味があなたのものと一致するゾンビを見るなら、あなたはそれらにメッセージを送りたいかもしれません。 （そして、覚えておいてください、ゾンビはルックスを心配していません - 彼らはあなたのブライアンにのみ興味があります。）
ゾンビが「好き」になった後、メッセージボタンを表示しましょう。 [いいね]ボタンであるという事実は、チェック状態を使用してCSSを使用してメッセージオプションを条件付きで表示できるため、チェックボックスが再び便利になっています。これがHTMLがハートSVGのすぐ下に追加されたものです。兄弟の兄弟であり、#trigger要素の後に来る限り、どこにでも行くことができます。
メッセージ
#Triggerチェックボックスがチェックされたら、メッセージングボタンを表示できます。
#trigger：checked〜.messagebtn {
表示：ブロック;
}私たちはこれまでのところ複雑さを避けて良い仕事をしましたが、ここで少しJavaScriptに手を伸ばす必要があります。メッセージボタンをクリックすると、そのゾンビにメッセージを送ることができると思いますよね？そのHTMLをに追加することはできますが、デモンストレーションのために、JavaScriptを使用してその場で構築できます。
私の最初の（素朴な）仮定は、テンプレートに<script>要素を追加し、カプセル化されたスクリプトを作成し、陽気な方法にいることでした。ええ、それはうまくいきません。テンプレートにインスタンス化された変数は、互いに区別できない変数についてJavaScriptの不機嫌になっていることを複数回インスタンス化します。 *Cranky JavaScriptで拳を振る*</script>
あなたはおそらくより賢いことをして、「ねえ、私たちはすでにこの要素のためにJavaScriptコンストラクターを作っているので、なぜJavaScriptをそこに入れないのですか？」まあ、私はあなたが私より賢いことについて正しかった。
それをして、コンストラクターにJavaScriptを追加しましょう。リスナーを追加します。リスナーは、クリックしたら、フォームを作成して表示してメッセージを送信します。これがコンストラクターが今どのように見えるかです、Smarty Pants：
customelements.define（ 'zombie-profile'、
クラスはhtmlelementを拡張します{
constructor（）{
素晴らしい（）;
profile = document.getElementById（ 'zprofileTemplate'）;
myprofile = profile.content;
const Shadowroot = this.attachshadow（{
モード：「オープン」
}）。appendChild（myprofile.clonenode（true））;
//「新しい」コード
//メッセージボタンをつかむと、後で使用するためにプロファイルをラッピングします
msgbtn = this.shadowroot.queryselector（'。messagbtn '）
profileel = this.shadowroot.queryselector（ '。プロファイル - ワッパー'）;
//イベントリスナーを追加します
msgbtn.addeventlistener（ 'click'、function（e）{
//すべての要素を作成するフォームを構築するために必要な
formel = document.createelement（ 'form'）と
subjectel = document.createelement（ 'input'）、
件名ラベル= document.createelement（ 'label'）、
contentel = document.createelement（ 'textarea'）、
contentlabel = document.createelement（ 'label'）、
submingel = document.createelement（ 'input'）、
closebtn = document.createelement（ 'button'）;
//フォーム要素を設定します。アクションは、あなたがあなたに提出したものを吐き出す私が構築したページに行くだけです
formel.setattribute（ 'method'、 'post'）;
formel.setattribute（ 'action'、 'https://johnrhea.com/undead-form-practice.php'）;
formel.classlist.add（ 'hello'）;
//恥ずかしがり屋になったらメッセージを閉じることができるようにボタンを閉じることができます
closebtn.innerhtml = "x";
closebtn.addeventlistener（ 'click'、function（）{
formel.remove（）;
}）;
//フォームフィールドとラベルのセットアップ
subjecel.setattribute（ 'type'、 'text'）;
subjecel.setattribute（ 'name'、 'subj'）;
subjectlabel.setattribute（ 'for'、 'subj'）;
subjectlabel.innerhtml = "subject：";
contentel.setattribute（ 'name'、 'cntnt'）;
contentlabel.setattribute（ 'for'、 'cntnt'）;
contentlabel.innerhtml = "message：";
submitel.setattribute（ 'type'、 'submit'）;
submitel.setattribute（ 'value'、 'send message'）;
//すべてのエルメントをフォームに置きます
Formel.AppendChild（closebtn）;
Formel.AppendChild（subjectlabel）;
Formel.AppendChild（subjectel）;
Formel.AppendChild（ContentLabel）;
Formel.AppendChild（contentel）;
Formel.AppendChild（submintel）;
//ページにフォームを置きます
ProfileL.AppendChild（Formel）;
}）;
}
}）;ここまでは順調ですね！
私たちがそれを1日と呼ぶ前に、私たちが対処する必要がある最後のものが1つあります。その最初の厄介な紹介ほど悪いことはないので、ゾンビの名前をデフォルトのメッセージテキストに追加することにより、これらの黙示録的なデートホイールをグリース化できます。それはユーザーにとってちょっとした便利さです。
let zname = this.getElementsByTagname（ "span"）[0] .innerhtml;
そして、イベントリスナー内にこれを追加します：
contentel.innerhtml = "hi" zname "、\ ni your braaains ...";
それほど悪くはなかったのですか？インタラクティブなWebコンポーネントは、ゾンビの出会い系シーンと同じくらい非scaryであることがわかっています。 Webコンポーネントの構造を理解する最初のハードルを乗り越えると、それはもっと意味があり始めます。インタラクティブなWebコンポーネントスキルを装備しているので、何を思いついたのか見てみましょう！他にどのような種類のコンポーネントやインタラクションが私たちのゾンビの出会い系サービスをより良くするでしょうか？それを作り、コメントで共有します。
以上がインタラクティブなWebコンポーネントは、あなたが思っているよりも簡単ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
