一台打字机，但使用新的 HTML 标签

上次，我制作了一个不使用 HTML、CSS 或 Javascript 的打字机动画。如果我们不什么都不用，而是允许自己使用……所有技术，会发生什么呢？

这一切都是通过一个炫酷的新 HTML 标签实现的<typewritten-text>！

This is a <typewritten-text><strong>typewriter effect!</strong></typewritten-text>

请点击此处查看安装和使用方法：

一个新的HTML标签？

HTML 标准允许开发者通过Web Components定义自定义元素。创建一个新元素只需要少量 JavaScript 代码，之后就可以根据需要定义任意数量的功能。

class MyElement extends HTMLElement {
  // code for how the element looks and behaves
}

window.customElements.define('my-element', MyElement)

该typewritten-text元素就是这样一种 Web 组件，旨在提供语义化、灵活且可重用的打字机组件！

由于 Web 组件是浏览器原生技术，因此它们可以开箱即用地与我们大多数喜爱的框架配合使用（说的就是你，React ……）。这是我最喜欢它们的原因之一！

诚然，开发者的体验有时会……非常痛苦。这个看似不起眼的小功能，最终实现起来却比我最初想象的要困难得多，也更难达成我的所有目标。

元素typewritten-text​

一旦 JavaScript 进入应用领域，基本上一切皆有可能。

• 无需使用等宽字体！内文可以使用任何字体和字号；实际上，你甚至可以混合使用不同的字体。
• 内置多行支持，方便您输入较长的句子。
• 界面非常简单；基本上可以像使用任何标准HTML标签一样使用它。

当然，我也尽力让它尽可能方便易用。

• 无论当前输入状态如何，它都能显示文本内容，这对于使用辅助技术的人来说尤其有用。
• 对于喜欢减少动态效果的用户，已禁用闪烁光标动画。
• 内容也不会发生偏移！元素的大小始终与其内容的大小一致。

或许它最有趣的功能在于其事件机制。当输入字符或短语结束时，该元素会触发事件。通过监听这些事件，你可以利用代码的魔力，让打字机执行任何你想要的自定义行为！

例如，开始编写另一段文字：

first.addEventListener('typewritten-text:phrasetyped', () => {
    second.start()
})

展示

这里介绍几个你可以用这个typewritten-text组件做的巧妙事情！

打字机循环

利用事件，可以轻松地循环切换不同的文本进行输入。

该typewritten-text元素的设计非常基础，以便能够以尽可能多的方式使用，因此循环效果并未内置。不过，可以创建一个不同的 Web 组件来封装该效果！

角色对话

角色说话时也常常带有打字机动画效果！

点击Rerun画面底部即可再次观看动画。

了解更多

所有关于如何安装和使用该typewritten-text组件的信息都可以在 GitHub 上找到！

我可能很快会写一些关于实际制作（和测试）Web组件的过程。