原文地址：dev.to/webpadawan/…

原文作者：dev.to/webpadawan

发表时间：2019年10月22日更新于2020年5月22日・2分钟阅读

构建Web组件是我喜欢的事情，而且使用LitElement创建一个Web组件真的很容易。然而，围绕LitElement的生态系统还不是很成熟，有时候我们在使用Polymer开发时，某些重要的工具还没有被替代。

文档就是这样一个缺失的部分。虽然我们可以使用Storybook和open-wc.org的预设来展示我们组件的不同状态，但我们还缺少一件事：一个简单的工具来浏览API文档。这正是我今天要分享的组件的目的。

是什么？

满足<api-viewer>元素! 它是用LitElement和TypeScript构建的。查看实时演示，看看它提供了什么样的文档。

注意，这只是0.1.0版本，我有很多关于如何改进API查看器的想法。另外，这个组件背后的想法是，我们可能会在未来的Vaadin组件中使用它，所以随着时间的推移，可能会有一些 "内部 "的功能请求，但我们总是欢迎社区的反馈。

为什么这么说呢？

虽然我们仍然可以使用Polymer团队的polymer-analyzer工具和<iron-component-page>组件来处理LitElement和文档属性、方法和事件，但如果我们切换到TypeScript，就会开始变得复杂。而且，这些组件和工具也不再主动更新了。

值得庆幸的是，有一个web-component-analyzer，是Rune Mehlsen的CLI工具。它提供了提取自定义元素的属性、属性、方法、事件、插槽和自定义CSS属性的能力，并将分析结果输出为markdown或JSON（包括VSCode团队提出的格式）。

我一直在寻找一个与Analyzer兼容的web组件，我发现了Bruce B. Anderson的<wc-info>。虽然我喜欢它的总体思路，但这个组件仍然不是我所需要的。所以我决定从头开始构建<api-viewer>，几天后我就构建了一个MVP。

怎么做呢？

下面是一个最小的使用示例，你可以用es-dev-server来运行。

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import 'api-viewer-element';
    </script>
  </head>

  <body>
    <api-viewer src="./custom-elements.json"></api-viewer>
  </body>
</html>

按照完整的使用说明来学习如何生成JSON文件。Web Component Analyzer的文档也值得查看。

当然，如果您对<api-viewer>有任何意见、功能要求或其他反馈，请告诉我。让我们一起把它做得更好

通过www.DeepL.com/Translator（免费版）翻译

[Web翻译]<api-viewer>: 记录您的Web Components API。

是什么？

为什么这么说呢？

怎么做呢？