Web Components 封装的系统通知组件通过自定义元素 实现徽标与通知内容一体化，依托 Shadow DOM 隔离样式，支持 count、timeout、type 属性响应式更新，徽标具备 aria-label 语义、点击事件及键盘交互，结构含图标区、slot 内容区和绝对定位徽标，适用于动态创建与主题适配。

Web Components 实现带徽标的系统通知组件，核心是封装一个自定义元素（如 ），内部集成徽标（badge）逻辑与通知内容渲染，并支持动态更新、自动关闭、主题适配等能力。关键不在于复杂度，而在于职责清晰和可复用性。

结构设计：用 Shadow DOM 隔离样式与逻辑

使用 customElements.define() 注册组件，构造函数中调用 this.attachShadow({ mode: 'open' }) 创建影子根。HTML 结构建议包含三部分：图标容器（可选）、通知主体文本、右上角徽标（）。徽标默认隐藏，仅当传入 count 属性且大于 0 时显示。

• 徽标使用绝对定位 + CSS 变量控制颜色/尺寸，便于主题切换
• 通知主体用 接收外部内容，提升灵活性
• 图标区域预留 icon 属性或具名 slot，支持传入 SVG 或文字

属性与响应式更新：用 observedAttributes 监听变化

定义静态 observedAttributes 数组，监听 count、timeout、type（如 info/warn/error）等属性。在 attributeChangedCallback 中更新徽标显示、背景色、自动关闭定时器。

• 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 } })），方便父组件做跳转或标记已读。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 避免纯装饰性徽标：若仅作计数展示，不响应点击，仍需保留 aria-label
• 徽标尺寸适中（建议 16×16px 起），与通知容器保持足够间距，防止误触
• 支持键盘聚焦：设置 tabindex="0" 并监听 Enter / Space 键触发相同行为

使用示例与集成提示

在 HTML 中直接使用：系统正在更新。配合 JS 动态创建更常见：

const notif = document.createElement('sys-notification');
notif.setAttribute('count', '2');
notif.textContent = '检测到新版本';
document.body.appendChild(notif);

注意：若多个通知共存，建议由一个通知管理器统一控制堆叠、Z-index 和清除策略，组件本身只负责单条渲染与交互。