交互式网络组件比您想象的要容易

在我的上一篇文章中，我们看到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中文网其他相关文章！