Web Components 封装的系统通知组件通过自定义元素 实现徽标与通知内容一体化，依托 Shadow DOM 隔离样式，支持 count、timeout、type 属性响应式更新，徽标具备 aria-label 语义、点击事件及键盘交互，结构含图标区、slot 内容区和绝对定位徽标，适用于动态创建与主题适配。
Web Components 实现带徽标的系统通知组件，核心是封装一个自定义元素（如 <sys-notification></sys-notification>），内部集成徽标（badge）逻辑与通知内容渲染，并支持动态更新、自动关闭、主题适配等能力。关键不在于复杂度，而在于职责清晰和可复用性。
结构设计：用 Shadow DOM 隔离样式与逻辑
使用 customElements.define() 注册组件，构造函数中调用 this.attachShadow({ mode: 'open' }) 创建影子根。HTML 结构建议包含三部分：图标容器（可选）、通知主体文本、右上角徽标（<span class="badge"></span>）。徽标默认隐藏，仅当传入 count 属性且大于 0 时显示。
- 徽标使用绝对定位 + CSS 变量控制颜色/尺寸，便于主题切换
- 通知主体用
<slot></slot>接收外部内容，提升灵活性 - 图标区域预留
icon属性或具名 slot，支持传入 SVG 或文字
属性与响应式更新：用 observedAttributes 监听变化
定义静态 observedAttributes 数组，监听 count、timeout、type（如 info/warn/error）等属性。在 attributeChangedCallback 中更新徽标显示、背景色、自动关闭定时器。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
count为数字时，徽标显示为count > 9 ? '9+' : count -
timeout值为正数时，启动setTimeout自动移除组件（触发this.remove()） -
type改变时，通过this.shadowRoot.querySelector('.notification').setAttribute('data-type', value)更新状态类，交由 CSS 控制样式
徽标交互与可访问性
徽标不只是视觉装饰，需兼顾语义与操作。给徽标元素添加 aria-label="有 {count} 条新通知"，并在用户点击徽标时派发自定义事件（如 new CustomEvent('badge-click', { detail: { count } })），方便父组件做跳转或标记已读。
- 避免纯装饰性徽标：若仅作计数展示，不响应点击，仍需保留 aria-label
- 徽标尺寸适中（建议 16×16px 起），与通知容器保持足够间距，防止误触
- 支持键盘聚焦：设置
tabindex="0"并监听Enter/Space键触发相同行为
使用示例与集成提示
在 HTML 中直接使用：<sys-notification count="3" timeout="5000" type="info">系统正在更新</sys-notification>。配合 JS 动态创建更常见：
const notif = document.createElement('sys-notification');
notif.setAttribute('count', '2');
notif.textContent = '检测到新版本';
document.body.appendChild(notif);
注意：若多个通知共存，建议由一个通知管理器统一控制堆叠、Z-index 和清除策略，组件本身只负责单条渲染与交互。
