发布你的组件到webcomponents.org

beta.webcomponents.org是一个可以：

• 发布自己的自定义组件或组件集合
• 查看别人发布的自定义组件或组件集合
• 查看组件的readme、demo及API文档

的网站。事实上Polymer的Element Catalog已经会重定向到这里。
本文会介绍一下怎么在上面发布自己的组件。

Publish your element已经很详细地讲解了如何发布及相关细节，本文只是对其的翻译、整理。

组件要求

你的组件必须符合下面要求：

• 使用开源许可。没特殊要求的话可以直接使用非常自由的MIT；把写好的许可文件保存在项目根目录下的LICENSE就可以了。
• Tag & Release。你需要对你的项目打tag，最好是使用语意化版本。
• Readme。你可以直接使用模板；另外webcomponents.org支持直接在Readme中显示demo，这个我们会在下文提到。

Release（打tag）步骤：

• checkout到合适的分支或commit，然后运行git tag [version]，例如git tag v0.1.0
• git push origin v0.1.0

发布！

完成上述的准备后：

• 进入Publish your element
• 找到中间的"Ready to publish?"
• 输入github项目的地址，[username]/[project_name]
• 勾选"I'm not a robot"
• 点击Publish

Better Readme

下面是一些可选的功能。

添加徽章

你可以添加这个一个徽章：

Published on webcomponents.org
到你的项目readme里，声明这已经是一个webcomponents.org发布的组件。
直接复制下面代码到你的项目readme.md里。

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/owner/my-element)

在Readme里显示demo

Webcomponents.org可以在展现项目Readme的时候直接根据里面的代码来显示demo：

<!--
```
<custom-element-demo>
  <template>
    <link rel="import" href="my-element.html">
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```
<my-element></my-element>
```

HTML注释内的内容就是最后会显示的demo内容；next-code-block会将注释下一段的例子代码（my-element那段）生成在demo内。
HTML注释内的内容可以自由编辑，例如你想有一个特定高度的div来撑开body：

    <div style="height: 200px">
      <next-code-block></next-code-block>
    </div