-
自定义元素命名必须含连字符且全小写，如date-picker；constructor仅初始化，DOM操作须在connectedCallback中执行；样式必须注入ShadowDOM；attributeChangedCallback需配合observedAttributes监听属性变更。
-
ShadowDOM必须通过attachShadow()创建，仅div、span、自定义元素等支持宿主，img/input等替换元素不支持；重复调用抛InvalidStateError；innerHTML直接赋值有XSS和样式污染风险，应使用DOMParser+adoptedStyleSheets安全注入。
-
使用box-sizing:border-box可解决padding导致固定宽度容器内文字意外换行的问题，它使width包含padding和border，避免内容区被挤压；还需配合word-break、overflow-wrap或text-overflow等文本控制属性，并检查flex/grid布局中的最小尺寸约束。
-
应改用rem实现语义化字号体系：以:root的font-size为基准，通过简单倍数（如1rem=16px）统一控制，避免px堆砌导致维护困难，同时注意图标字体、placeholder等场景需禁用rem。
-
auto-fill配minmax(250px,1fr)最稳：auto-fill预占位不塌缩，1fr为弹性上限，配合aspect-ratio和object-fit才能防图片变形，响应式优先，IE11需@supports降级。
-
Number.isFinite()是校验有限数字的可靠方法，严格要求输入为number类型且非NaN、非Infinity，不进行隐式转换，适合过滤API中混杂的字符串、null等不可信数据。
-
scroll-padding-top必须写在html元素上，因为浏览器根滚动容器是html；body或目标元素上设置基本无效；正确写法为html{scroll-padding-top:64px;}。
-
IntersectionObserver是实现滚动高亮的唯一合理起点，因其能精准监听标题进入视口，兼顾性能、精度与兼容性，而纯CSS无法感知可视区域。
-
本文详解单页网站中点击导航菜单跳转时，粘性（Sticky）头部遮挡目标标题的常见问题，提供基于jQuery的平滑滚动+头部偏移补偿+滚动高亮+动态固定类切换的完整解决方案。
-
line-clamp不生效主因是父容器未满足-webkit-box布局前提，须同时设display:-webkit-box、-webkit-line-clamp和-webkit-box-orient:vertical，且仅对块级元素有效，Firefox118+才支持无前缀语法。
-
加target="_blank"不安全，必须同时加rel="noopener"才能防止window.opener劫持；否则新页面可篡改原页面地址栏、DOM或拖慢性能，即Tabnabbing攻击。
-
scheme属性在现代HTML中已失效，浏览器静默忽略，W3CHTML验证器报错“Attributeschemenotallowed”，ASP.NET中HtmlMeta.Scheme仅服务端可用但无实际作用，应改用标准化name值或JSON-LD等替代方案。
-
优先选position:fixed；它不依赖父容器滚动状态，能真正钉在视口顶部，而sticky在根元素上行为不可靠且易受transform/filter等属性干扰。
-
Object.is与===的核心区别在于对NaN和带符号零的处理。1.NaN比较：Object.is(NaN,NaN)返回true，而NaN===NaN为false；2.+0与-0比较：Object.is(+0,-0)返回false，而===认为它们相等。其他情况下二者行为一致，均不进行类型转换且对象比较基于引用。
-
核心思路是通过接口抽象和构造函数注入实现网络请求的可替换性，业务类依赖NetworkService等抽象接口而非具体实现，测试时传入Mock或Stub对象控制返回数据，确保测试快速稳定可重复。
