可能你已经知道 Joomla 4 的前几个 Alpha 版本已经发布，如果你足够好奇，你也许已经本地安装了它。如果你这样做了，那么你可能已经注意到当你登录管理员时，第一页包含了一些警告。好吧，这些警告，尽管看起来像 Bootstrap，但实际上是自定义元素！了解这对你的网站意味着什么。

那么，这些自定义元素是什么呢？

自定义元素是本地平台（W3C）的一部分，由称为 Web Components 的技术组成。本质上，自定义元素是向浏览器声明新元素的方式！让我们进一步解释：浏览器自带一些预定义的元素（或标签），例如 div、span、input 等，还有一些更高级的，如 video。video 是一个非常有趣的标签，因为所有你需要定义的是视频文件的源，你的浏览器会自动创建一个带有许多按钮（播放、位置滑块等）的视频播放器。自定义元素是允许任何开发者创建此类丰富元素的技术！

为什么不使用 Web Components 呢？

Web components 实际上由 3 个不同的部分组成：Custom Elements、Templates 和 Shadow Dom。不幸的是，由于 Joomla 中表单的创建方式，Shadow Dom 会对它们造成严重破坏。还有另一个关于 CSPs（内容安全策略）的担忧，这同样重要——有关更多信息，请参阅 Mozilla 开发者文档：https://mdn.org.cn/en-US/docs/Web/HTTP/CSP！因此，Joomla 4 将仅支持（在核心中）Templates 和 Custom Elements（但开发者也可以使用 Shadow Dom，我们为此提供了一个标志来加载正确的 polyfill）。

polyfill？我以为这是原生的浏览器技术...

嗯，它是 Chrome 和 Safari 的，但还不是 Firefox（宣布于 2018 年 3 月）和 Edge（2018 年稍后）。但是，由于 Joomla 4 支持 IE11，所以始终需要 polyfill。但不要为此烦恼，因为 polyfill 只有 11Kb，并且由创建它的开发者（即 Google Polymer 团队）进行了积极测试。

那么为什么是自定义元素呢？

让我们深入探讨Joomla 3.x中与选项卡相关的现有代码。

• 脚本很旧（Bootstrap 2）
• 脚本有2个依赖项（Bootstrap和Jquery）
• 脚本需要内联代码来启动每个选项卡集合
• 需要一个单独的脚本来处理选项卡状态（一个用于保留类似页面上最后已知选项卡的选项），这也需要一个polyfill（80kb的javascript）！
• 所需功能的所有脚本的总体重量大于300Kb

除此之外，我们得到的HTML和Bootstrap类都很简单，但最重要的是，我们得到的UI不符合无障碍性指南！总的来说，这不是最佳选择！因此，我们决定为新的选项卡脚本以及UI组件的其他部分走另一条路。以下是我们设定的先决条件

• 脚本不应有任何依赖项
• 脚本不应有任何内联代码（我们希望通过CSP禁用内联javascript）
• 脚本应完全无障碍
• 脚本应包含所有必需的功能（例如，对于选项卡、选项卡状态等）
• 脚本只需几个HTML标签和一些属性
• 脚本和html/css应与任何CSS框架兼容
• 脚本应有一个合适的API（方法、事件）
• 脚本应具有适当的文档
• 脚本应使用ES6编写（面向未来）
• js+css的总重量应低于40kb（对于所有UI组件的总和）！！！

值得注意的链接

• Joomla UI组件的repo（注意这将在大约1周后完成 - 临时开发repo位于这里）
• 文档（注意这将在大约1周后完成 - 临时开发repo位于这里）
• 德国Joomla Day的一个会话（将任何内容转换为自定义元素）

Joomla需要你！

这是一个活跃的项目，已经差不多半年多的时间一直在进行中。对于参与的人来说，这是一个非常有回报的项目，因为他们是那些玩和塑造Joomla 4将使用的核心构建块的人！因此，JavaScript团队邀请您加入团队并与之合作。即使你不是JavaScript专家，我们也有很多领域需要有人提供帮助（从CSS到文档再到测试）。加入一个致力于将当前平台标准带到我们喜爱的CMS的团队！在这里加入我们。