交互式網絡組件比您想像的要容易

在我的上一篇文章中，我們看到Web組件並不像看起來那麼可怕。我們查看了一個超級簡單的設置，並製作了殭屍約會服務配置文件，並配有自定義元素。我們重複了每個配置文件的元素，並使用元素填充了每個配置文件的元素。

這就是一切在一起的方式。

那很酷，很有趣（嗯，無論如何我都很開心……），但是如果我們將這個想法進一步互動，該怎麼辦。我們的殭屍個人資料很棒，但是對於您來說，這是一種有用的，後的世界末日約會經歷，您知道，“喜歡”殭屍，甚至給他們發消息。這就是我們將在本文中做的。我們將揮動另一篇文章。 （對殭屍來說，揮動會是合適的嗎？）

文章系列

• 網絡組件比您想像的要容易
• 交互式網絡組件比您想像的要容易
  （你在這裡）
• 在WordPress中使用Web組件比您想像的要容易
• 帶有Web組件的內置元素比您想像的要容易
• 上下文感知的網絡組件比您想像的要容易
• Web組件偽級和偽元素比您想像的要容易

本文假定有關Web組件的基本知識水平。如果您是這個概念的新手，那完全可以 - 上一篇文章應該為您提供所需的一切。前進。閱讀。我會等待。 * Twiddles拇指*準備好了嗎？好的。

首先，對原始版本的更新

讓我們暫停一秒鐘（好的，也許更長），看看:: lotted（）偽元素。在上一篇文章出版之後，這引起了我的注意（謝謝，玫瑰！），它解決了我遇到的封裝問題（儘管不是全部）。如果您還記得的話，我們在組件的之外有一些CSS樣式，以及

但這就是::插槽發揮作用。我們像這樣聲明選擇器中的元素：

 ::插槽（img）{
  寬度：100％；
  最大寬度：300px;
  身高：自動；
  保證金：0 1EM 0 0;
}

現在，將選擇放置在任何插槽中的任何元素。這有很大幫助！

但這並不能解決我們所有的封裝困境。雖然我們可以直接在插槽中選擇任何內容，但我們不能選擇插槽中元素的任何後代。因此，如果我們有一個帶孩子的插槽（例如殭屍配置文件的興趣部分），我們將無法從元素中選擇它們。另外，當::插槽具有很好的瀏覽器支持時，有些事情（例如選擇一個偽元素，例如，:: slotted（span）::之後）會在一些瀏覽器（您好，Chrome）中工作，但在其他瀏覽器中不起作用（您好，Safari）。

因此，雖然它不是完美的，但是::插槽確實提供了比以前更多的封裝。這是已更新的約會服務，以反映以下內容：

返回交互式Web組件！

我想做的第一件事是添加一些動畫來調味。讓我們讓我們的殭屍個人資料圖片逐漸消失並翻譯成負載。

當我第一次嘗試此操作時，我使用img和:: llotted（img）選擇器直接為圖像做動畫。但是我得到的只是野生動物園的支持。 Chrome和Firefox不會在插入的圖像上運行動畫，但是默認圖像可以很好地動畫。為了使它起作用，我用.pic類將插槽包裹在DIV中，然後將動畫應用於DIV。

 .pic {
  動畫：Picfadein 1s 1s易於前進；
  變換：翻譯（20px）;
  不透明度：0;
}

@keyframes picfadein {
  來自{不透明度：0;變換：翻譯（20px）; }
  到{不透明：1;變換：translatey（0）; }
}

“喜歡”殭屍

那可愛的殭屍不是“喜歡”的東西嗎？我的意思是從用戶的角度來看。這似乎至少應該擁有在線約會服務。

我們將添加一個複選框“按鈕”，該複選框在單擊時啟動心臟動畫。讓我們在.info div的頂部添加此HTML：

 <input type="“複選框”"> 喜歡 <label></label>

這是我在一起的心臟SVG。我們知道殭屍愛事物很可怕，所以他們的心將是夏普勒的灼熱的陰影：

 <svg viewbox="“" xmlns="”" http: fill-rule="”" fiendodd clip-rule="”" stroke-line line join="“" fill="”＃7aff00“/"> </svg>

這是添加到模板的

 #trigger：checked .likebtn {
  /*檢查.likeBtn的狀態。翻轉未檢查狀態的前景/背景顏色。 */
  背景色：＃960B0B;
  顏色：#fff;
}

＃扳機 {
  /*將帶有for for for屬性的標籤附加到輸入的標籤後，單擊標籤檢查/取消選中框，以便我們刪除複選框。 */
  顯示：無；
}

。心 {
  / *從如此小的人開始，這是幾乎看不見的 */
  變換：比例尺（0.0001）;
}

@keyframes heartanim {
  / *心臟動畫 */
  0％{變換：比例尺（0.0001）; }
  50％{變換：比例（1）; }
  85％，100％{變換：比例（0.4）; }
}

#trigger：檢查〜.heart {
  / *檢查復選框啟動動畫 */
  動畫：1S心anim易於啟動前進；
}

那裡幾乎是標準的HTML和CSS。沒有什麼幻想或堅定的網絡組件。但是，嘿，它有效！而且由於它是一個複選框，因此“與殭屍不同”和“喜歡”的殭屍一樣容易。

消息傳遞殭屍

如果您是一位準備好混合的世界末日的單身，並看到一個與您的個性和興趣相匹配的殭屍，那麼您可能想給他們發消息。 （請記住，殭屍並不關心外觀 - 他們只對您的胸罩感興趣。）

讓我們在殭屍“喜歡”之後透露一個消息按鈕。類似按鈕是複選框的事實再次派上用場，因為我們可以使用其檢查狀態來有條件地顯示使用CSS的消息選項。這是HERT SVG下方添加的HTML。只要它是兄弟姐妹，它幾乎可以走到任何地方。

 <button>消息</button>

檢查#trigger複選框後，我們可以將消息傳遞按鈕顯示到視圖：

 #trigger：檢查〜.messagebtn {
  顯示：塊;
}

到目前為止，我們已經做得很好，避免了複雜性，但是我們需要在這裡找到一點JavaScript。如果我們單擊“消息”按鈕，我們希望能夠給殭屍介紹，對嗎？雖然我們可以將HTML添加到我們的中，但出於演示目的，讓我們使用一些JavaScript即時構建它。

我的第一個假設是，我們可以在模板中添加<script>元素，創建一個封裝的腳本，然後以我們的快樂方式添加。是的，那行不通。模板中實例化的任何變量都會多次實例化，很好，JavaScript關於彼此無法區分的變量的浮躁。 *搖晃拳頭在Cranky JavaScript*</script>

您可能會做一些更聰明的事情，然後說：“嘿，我們已經為此元素做了一個JavaScript構造函數，所以為什麼不將JavaScript放在那裡呢？”好吧，我比我更聰明。

讓我們這樣做，然後將JavaScript添加到構造函數。我們將添加一個偵聽器，一旦單擊，就會創建並顯示一個表格以發送消息。這是構造函數現在的樣子，聰明的褲子：

 customelements.define（'Zombie-Profile'，，
類擴展htmlelement {
  constructor（）{
    極好的（）;
    讓profile = document.getElementById（'zprofiletemplate'）;
    讓myprofile = profile.content;
    const shadowroot = this.attachshadow（{
      模式：“打開”
    }）。附錄（myprofile.clonenode（true））;

    //“新”代碼
    //獲取消息按鈕和DIV包裝配置文件以供以後使用
    令msgbtn = this.shadowroot.queryselector（'。messagebtn'），
        profilel = this.shadowroot.queryselector（'。profile-wrapper'）;
    
    //添加活動聽眾
    msgbtn.addeventlistener（'click'，function（e）{

      //創建我們需要構建形式的所有元素
      令formel = document.createelement（'form'），
          主題= document.createelement（'輸入'），
          objecterLabel = document.createelement（'label'），
          contentel = document.createelement（'textarea'），
          contentlabel = document.createelement（'label'），
          submitel = document.createelement（'輸入'），
          CloseBtn = document.CreateeLement（'button'）;
        
      //設置表單元素。動作只是我構建的頁面，該頁面吐出了您提交給您的內容
      formel.setAttribute（'方法'，'post'）;
      FORMEL.SETATTRIBUTE（'Action'，'https://johnrhea.com/undead-form-practice.php'）;
      FORMEL.CLASSLIST.ADD（'Hello'）;

      //設置關閉按鈕，以便我們可以關閉消息，如果我們害羞
      CloseBtn.innerHtml =“ X”;
      collectbtn.addeventlistener（'click'，function（）{
        formel.remove（）;
      }）;

      //設置表單字段和標籤
      subjectel.setAttribute（'type'，'text'）;
      subjectel.setAttribute（'name'，'subj'）;
      subjectlabel.setAttribute（'for'，'subj'）;
      subjectlabel.innerhtml =“主題：”;
      contentel.setAttribute（'name'，'cntnt'）;
      contentLabel.setAttribute（'for'，'cntnt'）;
      contentLabel.innerhtml =“消息：”;
      submitel.setAttribute（'type'，'submit'）;
      Submitel.setAttribute（'value'，'發送消息'）;

      //將所有Elments以形式放置
      FORMEL.APPENDCHILD（CLOSSBTN）;
      FORMEL.APPENDCHILD（主題標籤）;
      formel.appendchild（主題）;
      formel.appendchild（contentLabel）;
      formel.appendchild（contentel）;
      formel.appendchild（submitel）;

      //將表格放在頁面上
      ProfileL.AppendChild（Formel）;
    }）;
  }
}）;

到目前為止，一切都很好！

在我們稱其為一天之前，我們需要解決最後一件事。沒有什麼比第一次尷尬的介紹更糟糕的了，因此，通過將殭屍的名稱添加到默認消息文本中，讓那些後世界末日的約會車輪潤滑。對於用戶來說，這是一個很好的便利。

由於我們知道元素中的第一個跨度始終是殭屍的名稱，因此我們可以抓住它並將其內容粘貼在變量中。 （如果您的實現是不同的，並且元素的順序跳來跳去，則可能需要使用類來確保您始終獲得正確的選擇。）

令zname = this.getElementsBytagName（“ span”）[0] .innerhtml;

然後在活動偵聽器中添加此內容：

 contentel.innerhtml =“ hi” zname“，\ ni喜歡您的braaains ...”;

那還不錯，是嗎？現在，我們知道交互式網絡組件與殭屍約會場景一樣不納入……好吧，您知道我的意思。一旦克服了了解Web組件的結構的最初障礙，它就會變得更加有意義。現在，您擁有交互式網絡組件技能，讓我們看看您可以想到什麼！其他哪些組件或互動將使我們的殭屍約會服務更好？做到並在評論中分享。

以上是交互式網絡組件比您想像的要容易的詳細內容。更多資訊請關注PHP中文網其他相關文章！