月相小组件

关于页那个月相卡片的独立组件版。起因是看到不少站点想挂个月相装饰，但现成方案不是图片素材就是需要引入框架。

用法

<moon-phase></moon-phase>
<script type="module" src="moon-phase.js"></script>

就这两行。没有依赖，gzip 后不到 4KB。

实现

• 月相用简化版康威算法，误差在一天以内，装饰用途足够。
• 绘制用 Canvas：先画满月，再用离屏合成擦掉阴影部分，暗面加一层微光避免纯黑死区。
• 自定义元素封装，属性可以改尺寸与配色，Shadow DOM 隔离样式，不会污染宿主页。

为什么用 Web Components

组件的归宿是被各种技术栈引用。Web Components 是浏览器原生标准，Vue、React、纯 HTML 都能直接用，不需要为每个框架单独打包一版。