自定义分页器组件通过继承HTMLElement封装页码逻辑，监听current/total/size属性变化，动态生成页码按钮并提供goto方法统一处理跳转、状态同步与change事件派发，支持快捷按钮、输入跳转及Shadow DOM样式隔离。
自定义元素（Custom Element）实现分页器导航组件，核心是把“当前页、总页数、每页条数、跳转逻辑、按钮状态控制”这些行为封装进一个可复用的 Web Component 中，对外只暴露简洁的属性和事件接口。
定义基础结构与属性绑定
用 class 继承 HTMLElement，通过 static get observedAttributes() 监听关键属性变化，比如 current（当前页）、total（总页数）、size（每页条数）。属性值变更时触发 attributeChangedCallback，自动同步内部状态并重绘 UI。
- current：默认为 1，需校验是否在合法范围内（1 ≤ current ≤ total）
- total：必须为正整数，小于 1 时隐藏分页器或显示空态
-
size：影响总页数计算（
Math.ceil(total / size)），但分页器本身不依赖它渲染，仅用于外部联动
生成页码按钮并处理点击逻辑
根据 current 和 total 动态生成页码按钮（如 1、2、3…），常用策略是“省略中间页”，例如显示 1 … 5 6 7 … 10。每个按钮绑定 click 事件，调用内部 goto(page) 方法：
- 校验目标页是否越界，越界则静默忽略
- 更新
this._current并同步设置this.setAttribute('current', page) - 派发
change自定义事件，携带{ detail: { page } }，供外部监听响应
提供快捷操作与状态反馈
除了数字页码，还需支持「上一页」「下一页」「首页」「末页」按钮，并实时禁用不可用状态（如第一页时「上一页」置灰）：
- 按钮使用
disabled属性控制交互，同时用 CSS 区分视觉状态 - 输入框跳转需监听 Enter 键和失焦事件，输入非数字或超范围时回退到当前页
- 所有用户触发的页码变更都应通过统一入口
goto()，确保状态和事件一致性
样式隔离与轻量集成
使用 Shadow DOM 封装样式，避免全局污染。内置基础 CSS 即可满足多数场景，也允许外部通过 :host 或 CSS Custom Properties（如 --pager-bg）定制外观：
- 默认采用 flex 布局排列按钮，间距、圆角、颜色均可覆盖
- 不强制引入图标字体或 JS 框架，纯原生实现，体积小、兼容性好（支持 Chrome 67+、Firefox 63+、Safari 12.1+）
- 注册时用
customElements.define('pager-nav', PagerNav)，HTML 中直接写<pager-nav current="3" total="25"></pager-nav>
