# @custom-elements-manifest/to-markdown 中文文档

规范地址：https://npmcn.com/package/%40custom-elements-manifest/to-markdown/

版本：0\.1\.0
npm 元数据更新时间：2022-04-05T02:21:17.259Z
中文译文更新时间：2026-11-11T05:14:58.894Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40custom-elements-manifest/to-markdown
原文对照：https://npmcn.com/package/%40custom-elements-manifest/to-markdown/?lang=original
项目主页：https://github.com/open-wc/custom-elements-manifest
源码仓库：https://github.com/open-wc/custom-elements-manifest

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：122 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- 首次发布：2021-02-12T12:35:20.722Z
- 最新版本发布：2021-10-26T16:31:24.791Z
- 近 30 天下载量：12242（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 0 个）

## 中文简介

自定义元素. json是描述自定义元素的文件格式. 这种格式将允许工具化和IDEs在给定项目中提供丰富的自定义元素信息. 然而,它非常具有实验性,而且情况会发生变化。 跟随

## 安装

```sh
npm install @custom-elements-manifest/to-markdown
```

也可以使用：`pnpm add @custom-elements-manifest/to-markdown`、`yarn add @custom-elements-manifest/to-markdown`、`bun add @custom-elements-manifest/to-markdown`

## README

# @ 习惯要素 - 显示/ 标记下

自定义元素. json是描述自定义元素的文件格式. 这种格式将允许工具化和IDEs在给定项目中提供丰富的自定义元素信息. 然而,它非常具有实验性,而且情况会发生变化。 继续讨论 [这里](https://github.com/webcomponents/custom-elements-manifest)。 。 。 .

这个库需要一个自定义元素表单, 并让它被标记下来 .

## 使用量

安装 :

```bash
npm i -S @custom-elements-manifest/to-markdown
```

在代码中导入和使用 :

```js
import fs from 'fs';
import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown';

const manifest = JSON.parse(fs.readFileSync('./custom-elements.json', 'utf-8'));
const markdown = customElementsManifestToMarkdown(manifest);

fs.writeFileSync('./custom-elements.md', markdown);
```

### 选项

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 标题 | 整数 | 0 个 | 用这个数字来抵消标题级别 |
| 私营 | `'all'|'details'|'hidden'` | `'all'` | 见 [私人成员](https://npmcn.com/package/%40custom-elements-manifest/to-markdown/#readme-private-members) |
| 省略声明 | `OptionalDeclarations[]` | \[ | 见 [奥林匹克宣言](https://npmcn.com/package/%40custom-elements-manifest/to-markdown/#readme-omit-declarations) |
| 省略节 | `OptionalSections[]` | \[ | 见 [关闭部分](https://npmcn.com/package/%40custom-elements-manifest/to-markdown/#readme-omit-sections) |
| 分类Name | `string | (() => string)` | `'.*'` | 见 [类名过滤器](https://npmcn.com/package/%40custom-elements-manifest/to-markdown/#readme-class-name-filter) |

#### 私人成员

这个 `private` 选项控制个人成员如何出现在减记中.

-   `'all'`:私人成员根据来源顺序与公共成员并列
-   `'hidden'`:私人成员根本不出现在减记中,但受保护成员确实如此
-   `'details'`: 私有和受保护的成员在表格下方的详细披露部件中出现

#### 奥林匹克宣言

这个 `omitDeclarations` 选项是 `string[]` 控制最终减值产出中哪些实体。 这四种宣言类型是:

-   组合
-   变量
-   函数
-   出口

以下是可以过滤出所有四种声明类型的示例配置:

```js
customElementsManifestToMarkdown(manifest, {
  omitSections: ['mixins', 'variables', 'functions', 'exports' ]
})
```

\*\* 注:\*\*混合物既可作为声明提供,也可作为声明内的章节提供。 这个 `omitDeclarations` 选项 `mixins` 将仅过滤出顶层混合声明。 从 a 过滤出混音段 `class` 声明,使用 `mixin` 过滤从 `omitSections`。 。 。 .

#### 关闭部分

这个 `omitSections` 选项是 `string[]` json)在最后减值输出中应提供。 本节名称为:

-   主标题
-   超级类
-   字段
-   方法
-   静态字段
-   静态方法
-   插槽
-   事件
-   属性
-   css 财产
-   css 组件
-   组合

以下是显示如何过滤出几节的示例配置 :

```js
customElementsManifestToMarkdown(manifest, {
  // static fields and static methods tables will not be present
  // in the markdown result
  omitSections: [ 'staticFields', 'staticMethods' ]
})
```

#### 类名过滤器

根据你传给分析员的来源文件 `custom-elements-manifest.json` 可能包含的类文件声明数量超过您需要的最终减值输出。 这个 `classNameFilter` 选项接受一个 regex 作为字符串(或返回一个函数),用于在渲染前过滤类声明.

```js
customElementsManifestToMarkdown(manifest, {
  classNameFilter: () => {
    // some logic
    return `(${prefix}-*|SuperClassExact)`; // filters out every class name that doesnt match the regex provided
  } 
})
```

## 演示

```js
customElementsManifestToMarkdown(manifest, {
  headingOffset: 1,
  private: 'details',
})
```

来源

```json
{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "./fixtures/-TEST/package/my-element.js",
      "declarations": [
        {
          "kind": "class",
          "name": "SuperClass",
          "events": [
            {
              "name": "custom-event",
              "type": {
                "text": "SuperCustomEvent"
              },
              "description": "this is custom"
            }
          ],
          "superclass": {
            "name": "LitElement",
            "package": "lit-element"
          },
          "members": [
            {
              "kind": "method",
              "name": "superClassMethod",
              "privacy": "public"
            }
          ]
        },
        {
          "kind": "class",
          "name": "MyElement",
          "cssProperties": [
            {
              "name": "--background-color",
              "description": "Controls the color of bar"
            }
          ],
          "cssParts": [
            {
              "name": "bar",
              "description": "Styles the color of bar"
            }
          ],
          "slots": [
            {
              "name": "container",
              "description": "You can put some elements here"
            }
          ],
          "events": [
            {
              "name": "my-event",
              "type": {
                "text": "Event"
              }
            },
            {
              "name": "custom-event",
              "type": {
                "text": "SuperCustomEvent"
              },
              "description": "this is custom",
              "inheritedFrom": {
                "name": "SuperClass",
                "module": "./fixtures/-TEST/package/my-element.js"
              }
            }
          ],
          "mixins": [
            {
              "name": "LocalizeMixin",
              "package": "lion"
            },
            {
              "name": "Mixin",
              "module": "./fixtures/-TEST/package/my-element.js"
            }
          ],
          "superclass": {
            "name": "SuperClass",
            "module": "./fixtures/-TEST/package/my-element.js"
          },
          "attributes": [
            {
              "name": "prop-1",
              "fieldName": "prop1"
            },
            {
              "name": "prop2",
              "fieldName": "prop2"
            }
          ],
          "members": [
            {
              "kind": "field",
              "name": "prop1",
              "privacy": "public"
            },
            {
              "kind": "field",
              "name": "prop2",
              "privacy": "public"
            },
            {
              "kind": "field",
              "name": "prop3",
              "privacy": "public",
              "type": {
                "text": "boolean"
              },
              "default": "true"
            },
            {
              "kind": "field",
              "name": "foo",
              "type": {
                "text": "string"
              },
              "privacy": "private",
              "description": "description goes here",
              "default": "'bar'"
            },
            {
              "kind": "method",
              "name": "instanceMethod",
              "privacy": "public",
              "description": "Some description of the method here",
              "return": {
                "type": {
                  "text": ""
                }
              },
              "parameters": [
                {
                  "name": "e",
                  "type": {
                    "text": "Event"
                  }
                },
                {
                  "name": "a",
                  "type": {
                    "text": "string"
                  },
                  "description": "some description"
                }
              ]
            },
            {
              "kind": "field",
              "name": "mixinProp",
              "type": {
                "text": "number"
              },
              "privacy": "protected",
              "default": "1",
              "inheritedFrom": {
                "name": "Mixin",
                "module": "./fixtures/-TEST/package/my-element.js"
              }
            },
            {
              "kind": "method",
              "name": "superClassMethod",
              "privacy": "public",
              "inheritedFrom": {
                "name": "SuperClass",
                "module": "./fixtures/-TEST/package/my-element.js"
              }
            }
          ],
          "tagName": "my-element"
        },
        {
          "kind": "variable",
          "name": "variableExport",
          "description": "this is a var export",
          "type": {
            "text": "boolean"
          }
        },
        {
          "kind": "variable",
          "name": "stringVariableExport",
          "description": "this is a string var export",
          "type": {
            "text": "string"
          }
        },
        {
          "kind": "function",
          "name": "functionExport",
          "description": "This is a function export",
          "return": {
            "type": {
              "text": "boolean"
            }
          },
          "parameters": [
            {
              "name": "a",
              "type": {
                "text": "string"
              }
            },
            {
              "name": "b",
              "type": {
                "text": "boolean"
              }
            }
          ]
        },
        {
          "kind": "mixin",
          "name": "MyMixin4",
          "parameters": [
            {
              "name": "klass",
              "type": {
                "text": "*"
              },
              "description": "This is the description"
            },
            {
              "name": "foo",
              "type": {
                "text": "string"
              },
              "description": "Description goes here"
            }
          ]
        },
        {
          "kind": "mixin",
          "name": "Mixin",
          "parameters": [
            {
              "name": "klass",
              "type": {
                "text": "*"
              },
              "description": "This is the description"
            }
          ],
          "members": [
            {
              "kind": "field",
              "name": "mixinProp",
              "type": {
                "text": "number"
              },
              "privacy": "protected",
              "default": "1"
            }
          ]
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "SuperClass",
          "declaration": {
            "name": "SuperClass",
            "module": "./fixtures/-TEST/package/my-element.js"
          }
        },
        {
          "kind": "custom-element-definition",
          "name": "my-element",
          "declaration": {
            "name": "MyElement",
            "module": "./fixtures/-TEST/package/my-element.js"
          }
        },
        {
          "kind": "js",
          "name": "variableExport",
          "declaration": {
            "name": "variableExport",
            "module": "./fixtures/-TEST/package/my-element.js"
          }
        },
        {
          "kind": "js",
          "name": "stringVariableExport",
          "declaration": {
            "name": "stringVariableExport",
            "module": "./fixtures/-TEST/package/my-element.js"
          }
        },
        {
          "kind": "js",
          "name": "functionExport",
          "declaration": {
            "name": "functionExport",
            "module": "./fixtures/-TEST/package/my-element.js"
          }
        }
      ]
    }
  ]
}
```
结果

## `./fixtures/-TEST/package/my-element.js`数字 :

### 类 : `SuperClass`

#### 超级级

| 名称 | 模块 | 软件包 |
| --- | --- | --- |
| 列表 |  | 点数 |

#### 方法

| 名称 | 隐私 | 说明 | 参数 | 返回时 | 继承自 |
| --- | --- | --- | --- | --- | --- |
| 超级分类方法 | 公开 |  |  |  |  |

#### 活动

| 名称 | 类型 | 说明 | 继承自 |
| --- | --- | --- | --- |
| 自定义事件 | `SuperCustomEvent` | 这是自定义 |  |

* * *

### 类 : `MyElement`, (中文(简体) ), `my-element`

#### 超级级

| 名称 | 模块 | 软件包 |
| --- | --- | --- |
| 超级类 | ./固定/-TEST/包装/我的元素.js |  |

#### 混合

| 名称 | 模块 | 软件包 |
| --- | --- | --- |
| 本地化Mixin |  | 狮子 |
| 混音 | ./固定/-TEST/包装/我的元素.js |  |

#### 字段

| 名称 | 隐私 | 类型 | 默认 | 说明 | 继承自 |
| --- | --- | --- | --- | --- | --- |
| 道具1 | 公开 |  |  |  |  |
| 道具2 | 公开 |  |  |  |  |
| 道具3 | 公开 | `boolean` | `true` |  |  |

#### 方法

| 名称 | 隐私 | 说明 | 参数 | 返回时 | 继承自 |
| --- | --- | --- | --- | --- | --- |
| 实例方法 | 公开 | 这里对方法的一些描述 | `e: Event, a: string` |  |  |
| 超级分类方法 | 公开 |  |  |  | 超级类 |

#### 活动

| 名称 | 类型 | 说明 | 继承自 |
| --- | --- | --- | --- |
| 我的活动 | `Event` |  |  |
| 自定义事件 | `SuperCustomEvent` | 这是自定义 | 超级类 |

#### 属性

| 名称 | 外地 | 继承自 |
| --- | --- | --- |
| 平面图 1个 | 道具1 |  |
| 道具2 | 道具2 |  |

#### CSS 属性

| 名称 | 说明 |
| --- | --- |
| \-- 背景颜色 | 控制栏的颜色 |

#### 槽数

| 名称 | 说明 |
| --- | --- |
| 集装箱 | 你可以在这里放一些元素 |

私人 API

#### 字段

| 名称 | 隐私 | 类型 | 默认 | 说明 | 继承自 |
| --- | --- | --- | --- | --- | --- |
| o | 私营 | `string` | `'bar'` | 描述到这里 |  |
| 混合配置 | 受保护 | `number` | `1` |  | 混音 |

* * *

### 组合 : `MyMixin4`

#### 参数

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 宽度 | `*` |  | 这是描述 |
| o | `string` |  | 说明在这里 |

* * *

### 组合 : `Mixin`

#### 参数

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 宽度 | `*` |  | 这是描述 |

私人 API

#### 字段

| 名称 | 隐私 | 类型 | 默认 | 说明 | 继承自 |
| --- | --- | --- | --- | --- | --- |
| 混合配置 | 受保护 | `number` | `1` |  |  |

* * *

### 变量

| 名称 | 说明 | 类型 |
| --- | --- | --- |
| 变量导出 | 这是 var 导出 | `boolean` |
| 字符串变量导出 | 这是一个字符串 var 导出 | `string` |

* * *

### 职能

| 名称 | 说明 | 参数 | 返回时 |
| --- | --- | --- | --- |
| 函数导出 | 这是函数导出 | `a: string, b: boolean` | `boolean` |

* * *

### 出口

| 仁爱 | 名称 | 声明 | 模块 | 软件包 |
| --- | --- | --- | --- | --- |
| 编 | 超级类 | 超级类 | ./固定/-TEST/包装/我的元素.js |  |
| 自定义 | 我的元素 | 元素 | ./固定/-TEST/包装/我的元素.js |  |
| 编 | 变量导出 | 变量导出 | ./固定/-TEST/包装/我的元素.js |  |
| 编 | 字符串变量导出 | 字符串变量导出 | ./固定/-TEST/包装/我的元素.js |  |
| 编 | 函数导出 | 函数导出 | ./固定/-TEST/包装/我的元素.js |  |

## 常见问题

### @custom-elements-manifest/to-markdown 是什么？

自定义元素\. json是描述自定义元素的文件格式\. 这种格式将允许工具化和IDEs在给定项目中提供丰富的自定义元素信息\. 然而,它非常具有实验性,而且情况会发生变化。 跟随

### 如何安装 @custom-elements-manifest/to-markdown？

在项目目录运行 npm install @custom-elements-manifest/to-markdown，或使用 pnpm add / yarn add / bun add。

### @custom-elements-manifest/to-markdown 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @custom-elements-manifest/to-markdown 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @custom-elements-manifest/to-markdown 可以商用吗？

@custom-elements-manifest/to-markdown 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @custom-elements-manifest/to-markdown 的下载量有多少？

根据 npm 官方下载统计，@custom-elements-manifest/to-markdown 在 2026/10/11 – 2026/11/09 这 30 天内被下载 12,242 次，日均约 408 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @custom-elements-manifest/to-markdown 还在维护吗？

最新版本 0\.1\.0 发布于 2021/10/27（5 年前）；至今共发布 15 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/02/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。