1.8 用Preact创建自定义HTML标签

问题

在某些情况下，将React代码添加到现有的内容中是很有难度的。例如，在某些CMS（内容管理系统）配置中，不允许用户在页面主体中插入额外的JavaScript代码。在这种情况下，采用一些标准化的方式将JavaScript应用程序安全地插入页面中会很有帮助。

解决方案

你可以在网页上通过自定义标签的方式给HTML添加新的标签，这种方式也丰富了HTML语言。

本解决方案将介绍如何使用像Preact这样的轻量级框架来创建自定义标签，这样我们就可以在第三方服务器上发布这些创建的自定义标签。

我们先创建一个新的Preact应用程序。这个应用程序将提供我们在其他地方也能复用的自定义标签

现在，我们将切换到应用程序目录，并将preact-custom-element库添加到项目中：

preact-custom-element库允许我们在浏览器中注册新的自定义HTML标签。

接下来，我们需要修改Preact项目的 src/index.js 文件，使其能够注册新的自定义标签，我们把它命名为 components/Converter/index.js ：

这个注册方法会告诉浏览器我们要创建一个名为＜x-converter＞的自定义HTML标签，该标签有一个名为currency的属性，我们将在 src/components/Converter/index.js 中定义它：

为了符合自定义标签规范，我们命名时要以小写字母开始，不能包含任何大写字母，且要包含连字符 ^[1] 。这种约定可以确保自定义标签名称不会与任何标准标签名称冲突。

Converter组件是一个货币汇率换算器，我们在示例中用了一组固定的汇率。如果我们现在启动Preact服务器：

自定义标签的JavaScript代码可以在 http://localhost:8080/bundle.js 获取。

为了试用一下这个新的自定义标签，我们用HTML创建一个静态网页：

该网页在＜head＞的最后一个＜script＞标签中引入了自定义标签的定义。为了确保自定义标签在新旧浏览器中都可用，我们还添加了 unpkg.com 上的一些shim 。

现在，我们已经在网页中包含了自定义标签代码，可以像标准HTML一样在代码中插入＜x-converter＞标签。我们在本示例中也传入了currency属性，以便底层Preact组件接收。

无论在HTML中如何定义，自定义标签的属性名称都将以小写形式传递给底层组件。

我们可以通过一个独立于Preact服务器的网络服务器来运行这个页面。图1-10展示的就是这个新的自定义标签。

讨论

自定义标签不需要与调用它的Web页面在同一个服务器上，这意味着自定义标签可以用在任何Web页面上。因此，你可能需要检查对这个组件有传入请求的HTTP的Referer头，以防止未经授权的使用。

我们的示例呈现的是来自Preact开发服务器的自定义标签。在生产环境中，你可以选择创建组件的静态版本，其代码体积也会小很多 。

你可以从GitHub网站（ https://oreil.ly/aB7BP ）下载本解决方案的源代码。 JYsfJPf7+VZ4ef1UNqMuFFwkev7uVCLOKHuWxV5OCX1dg+7oWy2CSbTPE4ujtWN9