大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!
Web Component 组件在交互性上分层并以真正的渐进增强方式添加行为，这是 Web Component 的主要用例。接下来介绍几个目前已经可用的 Web Component 组件，大家感兴趣的也可以试一试。
1.<is-land>
一种新的以性能为中心的方式，将交互式客户端组件添加到网站。从技术上来说，是独立于框架的部分水合岛架构的实现。
is-land 的主要特征包括：
- 易于添加到现有组件
- 零依赖
- 与服务器框架或站点生成器工具没有紧密耦合。
- 占用空间小（最小化 5 kB；使用 Brotli 压缩为 1.61 kB）
- 可用于 SSR 友好框架的服务器渲染 (SSR) 组件示例，兼容 Svelte、Vue、Preact等
2.<details-utils>
<details-utils>是一套实用程序，用于向<details> 元素添加更多功能。将 <details-utils> 包裹在一个或多个 <details> 元素周围以增强其行为：
- 单击外部关闭（还绑定一个可选的关闭按钮）
- 动画打开和关闭（符合 prefers-reduced-motion）
- 强制打开/关闭，包括基于：JavaScript、媒体查询（例如，视口大小、prefers-reduced-motion，甚至 prefers-reduced-data）
- 当媒体查询不匹配时可以选择恢复用户状态（使用强制恢复属性）
- 通过 esc 键关闭、具有可选的媒体查询。
- 切换文档类（激活时切换 <html> 上的类，对于模式禁用文档溢出很有用）
3.video-radio-star
HTML5 视频的轻量级 Web 组件助手，适用于默认静音的 HTML5 视频。主要功能包括：
- 添加样式类：radiostar-enhanced、radiostar-muted、radiostar-playing、radiostar-paused、radiostar-ended
- 仅当视频在视口中通过 data-visible-autoplay 可见时才开始播放（通过 IntersectionObserver） 确保在标记中保留自动播放属性。
- 当视频滚动到视图之外时自动暂停视频（通过 IntersectionObserver）
- 在 preload="none" 的情况下按预期工作。
- 当 SaveData 为 true 时设置 preload="none"。
- 启用偏好减少运动时禁用自动播放
- 通过分别向一个或多个 <button> 元素添加数据静音、数据播放或数据暂停来使用您自己的外部静音/播放/暂停控件。
4.squirm-inal
squirminal 是一个模拟的终端 Web 组件，具有以下显著特征。
- 适用于 prefers-reduced-motion
- 无需 JavaScript 即可工作（后备显示内容）
- 通过<squirm-inal cursor>闪烁光标
- 通过 <squirm-inal autoplay> 自动播放（仅当可见时）
- 适用于任意 HTML 内容内的文本节点。
- 通过 <squirm-inal buttons> 播放/暂停/重置按钮
- 使用 <squirm-inalDimensions> 减少动画期间的布局移动。
5.announcement-banner
可重用的公告栏横幅组件，如果不需要横幅上的隐藏或关闭按钮（并保存用户首选项），则不需要这个只需使用 CSS。
<announcement-banner>
<a href="YOUR_URL">YOUR_TEXT</a>
<button type="button" data-banner-close>
Close
</button>
</announcement-banner>以下组件增强/修改嵌套 HTML，可以通过与服务器渲染（例如 WebC）更紧密的耦合来改进，但在低 JavaScript 环境中可以按原样工作。
6.<ppp-price>
一个小型的纯结构零依赖 Web 组件，用于显示平价购买力标准化价格。请注意，其不是货币转换器，它将数值与平价购买比率进行转换，以将该成本标准化为指定国家/地区的新价格。 输出使用 Intl.NumberFormat API 正确格式化本地化货币值。
这（可选）与 CloudCannon 的地理位置功能配合使用，自动检测访问者的国家/地区。
<!-- outputs $14.78 -->
<ppp-price from="us" to="gb" currency="usd">$10</ppp-price>
<ppp-price from="us" to="gb">$10 USD</ppp-price>
7.browser-window
一个小型主题零依赖 Web 组件，用于模拟 Safari 浏览器窗口的演示。
使用示例如下：
<browser-window
url="https://www.zachleat.com/web/"
icon
style="font-size: 20px"
>
This one scales with the parent font size (larger).
</browser-window>8.table-saw
用于响应式 <table> 元素的小型纯结构零依赖 Web 组件。深受 Filament Group 的 Tablesaw Stack jQuery 插件启发。
典型特征包括：
- 支持一个或多个<table>子元素。
- 适用于视口媒体查询或容器查询。
- 使用 CSS 网格进行小视口对齐。
- 在使用 JavaScript 之前或不使用 JavaScript 时都会回退到常规表。
使用示例如下：
<!-- Note: requires `type="module"` -->
<script type="module" src="table-saw.js"></script>
<!-- stacks below 640px viewport -->
<table-saw>
<table><!-- some HTML omitted for brevity --></table>
</table-saw>9.seven-minute-tabs
选项卡 Web 组件，具有以下特征：
- 代码转换为 Web 组件。
- 所有样式均已删除，并且该组件无需 CSS 即可正常运行。 为了代码复用，所有样式都留给独立的项目特定主题。
- 通过指向内容面板的锚链接从 <a> 逐步增强。
- 使用 JavaScript 向面板添加隐藏属性，以便当 JavaScript 不可用时内容仍然显示。
- 使用 JavaScript 添加 tabindex，以便无需 JavaScript 即可访问内容。
- 箭头键支持，Home/End 键支持。
下面是组件的基本用法：
<seven-minute-tabs>
<ol role="tablist" aria-label="What does this tab chooser do?">
<li>
<a href="#third-tab" role="tab">
Third tab
</a>
</li>
</ol>
<div id="first-tab" role="tabpanel">
First tab content
</div>
<div id="second-tab" role="tabpanel">
Second tab content
</div>
<div id="third-tab" role="tabpanel">
Third tab content
</div>
</seven-minute-tabs>10.resize-asaurus
resize-asaurus 是一个 Web 组件，用于添加调整大小行为以测试固有大小的响应组件。
<resize-asaurus>My component goes here</resize-asaurus>添加disabled属性以禁用组件行为（并隐藏其样式）。
<resize-asaurus disabled>My component goes here</resize-asaurus>参考文章
https://www.zachleat.com/web/a-taxonomy-of-web-component-types/
https://github.com/zachleat/details-utils
https://github.com/zachleat/video-radio-star
https://github.com/11ty/is-land
https://github.com/zachleat/squirminal
https://github.com/zachleat/parity-purchasing-power-price
https://github.com/zachleat/resizeasaurus
https://jayakrishnasfdc.wordpress.com/2020/11/29/web-components-and-types-its-includes-in-lwc/
本文暂时没有评论，来添加一个吧(●'◡'●)