我的原生 JavaScript 内置 Web 元素集合

所以我编写了这个元素集合。内置 Web 元素是“Web 组件”规范的一部分。它们允许我们扩展标准 HTML 组件并赋予它们新的强大功能。我编写它们的方式避免了重复使用常见的 UI 元素。我专注于元素的行为，并保持了极简主义的设计理念：

1. 几乎没有风格（行为驱动风格），让您可以自由添加自己的视觉标识。

2. 单一用途元素。每个元素只能执行一项操作。通常，它会封装复杂的行为。

3. 简洁性。代码非常简单。最大的组件源代码只有100行代码。没有复杂的多用途、高度可配置的元素。

4. 它与框架无关。这意味着无需任何框架。你可以在任何地方使用它们，只需添加is="el-name"属性即可赋予标准 HTML 元素新的功能。

正如 MDN 所说：“Web Components 是一套不同的技术，允许您创建可重用的自定义元素（其功能与代码的其他部分隔离开来），并在您的 Web 应用程序中使用它们。”

文档和使用说明

我花了一些精力分别记录了集合及其每个元素。这些元素真的非常易于使用。您只需加载 CSS 和 JS 文件，然后使用 `is` 属性来指定您希望赋予标签的行为即可。

例如

<div is="el-accordion" data-summary="Hello World">
  <p>Im an accordion that shows this message when expanded</p>
</div>

您可以在这里查看实时示例和文档：
https://felippe-regazio.github.io/web-elements

这里：
https://github.com/felippe-regazio/web-elements

所有元素都拥有丰富的 API，包含事件和方法。
我还需要添加辅助功能（这方面需要帮助）。

元素列表

• ⚡️手风琴

扩展 div 元素，使其具有手风琴结构和行为。

• ⚡️卡片

扩展 div 元素，使其具有卡片结构和行为。

• ⚡️标题

扩展头部元素，使其具有固定在顶部和滚动时自动隐藏等功能。

• ⚡️图像查看器

扩展 img 元素，使其全屏显示，点击后图像将在灯箱中显示。

• ⚡️延迟加载图片

扩展 img 元素，使其具有延迟加载行为。图像仅在可见时加载。

• ⚡️灯箱

扩展 div 元素，使其具有 Lightbox 效果。

• ⚡️胡子模板 Div

扩展 div 元素，使其具备模板引擎功能。该 div 元素将能够解析 JSON 数据并填充其内容。

• ⚡️阅读更多

扩展 div 元素，使其内部内容具有“阅读更多”功能。

• ⚡️侧边栏

扩展 div 元素，使其具有侧边栏结构和行为。

• ⚡️旋转器

扩展 div 元素，使其具有不同的配置，从而像加载指示器一样工作。

投稿、批评、任命、建议……都非常欢迎！

:)