Web组件的失败承诺

Web组件有如此大的潜力来支持HTML做更多的事情，并使非程序员更容易访问Web开发，使程序员更容易进行Web开发。还记得每次我们得到真正有用的新的闪亮的HTML元素时是多么令人兴奋吗？还记得能够直接在HTML中实现滑块、颜色选择器、对话框和公开小部件，而不必包含任何小部件库是多么令人兴奋吗？

Web组件的承诺是我们将获得这种便利，但是对于范围更广的HTML元素，开发速度要快得多，因为没有人需要等待完整的SPEC+实现过程。我们只需要包含一个脚本，然后砰，我们就有了更多的元素可供我们使用！

或者，这就是我的想法。在此过程中的某个地方，JS框架爱好者淹没了这个空间，他们陶醉于复杂的API、过度设计的构建过程和看起来像榕树根的依赖图。

仔细阅读webComponents.org上的组件让我充满了焦虑，我非常喜欢编写JS-我以编写JS为生！那些不会写JS的人还有什么希望呢？在使用目录中的自定义元素之前，通常需要进行npm fluglhorn、导入小丑鞋、构建quux的例行公事，所有这些都是毫无歉意的，因为“这是我的一车依赖项，是的，什么”。许多步骤甚至被省略了，很可能是因为它们是“显而易见的”。通常，您费力地穿过迷宫，却发现组件不再工作，或者不适合您的目的。

除了设置之外，主要的问题是在这些组件的设计中没有适当地对待HTML。它们的设计不是尽可能接近标准的HTML元素，但希望JS能够为它们编写任何功能。HTML被简单地视为速记，或者更糟，仅仅被视为指示元素在DOM中的位置的标记，所有参数都通过JS传递。我记得几年前Jeremy Keith关于这一现象的一次精彩演讲，他在那里讨论了Google的这个网上商店Web组件演示，它是这种做法的典范。以下是其<；Body>；元素的全部内容：

如果这就是Google引领潮流的方式，我们怎么能指望贡献者设计遵循既定HTML约定的组件呢？

Jeremy从向后兼容的角度批评了这种做法：当JS被破坏或没有启用，或者浏览器不支持Web组件时，整个网站就是空白的。虽然这确实是一个严重的问题，但我主要关注的是可用性：HTML是进入语言的较低门槛。能够编写HTML的人比JS多得多。即使对于那些最终编写JS的人来说，它通常也是在花费数年时间编写HTML&；CSS之后才出现的。

如果组件是以需要JS的方式设计的，这将使成千上万的人无法使用它们。即使对于那些会编写JS的人来说，HTML通常也更容易：你不会看到很多人在广泛支持<；input type=<；range>；之后滚动自己的滑块或使用基于JS的滑块，对吧？

即使JS是不可避免的，它也不是非黑即白。设计良好的HTML元素可以将所需的JS的数量和复杂性降至最低。考虑一下<；Dialog>；元素：它通常需要*一些*JS，但通常是相当简单的JS。类似地，只需编写HTML，<；video>；元素就可以完美地使用，并且有一个全面的JSAPI，可供任何想要做奇特的自定义事情的人使用。

前几天，我一直在寻找一个简单的、无依赖关系的选项卡组件。您知道，这是使用Web组件很容易做到的典型示例，50%的教程都提到了这个示例。我甚至不在乎它看起来是什么样子，它是用来测试界面的。我只想要一些小的、工作起来像普通HTML元素的东西。然而，事实证明这太难了，我最终还是写了我自己的！

我不确定这是设计问题还是文档问题。也许对于这些Web组件中的许多组件来说，使用它们有更简单的方法。也许有一些普通的web组件我就是找不到。也许我找错了地方，在某个地方有另一个目录，有着不同的目标和不同的目标受众。

但如果不是，如果我不是唯一有这种感觉的人，我们需要一个具有严格纳入标准的Web组件目录：

即插即用。除了包括一个<；脚本>；标记之外，没有依赖项，没有设置。如果绝对需要依赖项(例如，在地图组件中绘制您自己的地图是没有意义的)，该组件会自动加载它(如果它还没有加载)。

语法和API遵循由内置HTML元素建立的约定，并且根据W3C的最小功耗原则，在没有组件用户编写JS的情况下可以完成的任何事情都可以在没有JS的情况下完成。

Themable via：：part()、选择性继承和自定义属性。默认情况下非常简约的样式。正常的CSS属性应该尽可能地“工作”。

目录中只有一个给定类型的组件，它是灵活和可扩展的，并由社区不断迭代和改进。用户不必费力地浏览30个不同的滑块和15个不同的标签。没有品牌，就没有“组件库”的孤岛。仅限设计为尽可能接近浏览器在当前技术允许的所有方式下实现的元素。

如果其他人有同样的想法，我会准备好做这件事，因为这不是一个人要解决的项目。谁和我一起去？

更新：哇，这个帖子炸了！感谢大家对参与未来可能的工作感兴趣。我目前正在与一些现有工作的利益相关者交谈，看看在我离开并创建新的合作之前，是否有任何潜在的合作。在推特上关注我，听听结果吧！