-
本文详解Quill在Svelte项目中因DOM绑定时机不当导致工具栏操作后光标重置到编辑器开头的问题，并提供符合Svelte生命周期规范的正确初始化方式。
-
additionalData是注入Sass全局变量最稳妥的方式，因其在Vite编译前统一拼接SCSS代码，确保所有样式块（含scoped）都能访问变量且不污染作用域。
-
Photomania不生效的直接原因是它不监听DOM变化且不处理内联样式对齐，仅识别预设class结构（如figure.photo）和正确初始化；手动用float、align或遗漏photomania.init()均导致失效。
-
WASM解码在低端设备需手动优化参数才能流畅运行：限制分辨率、跳过非关键帧、单线程、启用fastDecode；WebGL渲染改用单纹理+shader；内存设为32MB并复用模块，关闭日志与冗余功能。
-
HTML无原生筛选弹窗，需HTML+CSS+JS协同实现；<dialog>提供语义化基础但需JS控制显隐与兼容处理；筛选结构应语义化分组、包裹form便于数据提取与重置；弹窗仅负责返回过滤对象，由调用方决定请求逻辑；移动端需防点透、管焦点、适配滚动与输入事件。
-
BEM通过组件名前缀绑定样式作用域，避免层级选择器冲突和覆盖；强制类名结构（block__element--modifier）提升语义明确性与复用性；原子组件需统一结构、无外部依赖、完整交互链路及性能优化。
-
BEM与scoped分工协作：BEM规范命名意图，scoped控制作用域边界；合用可防样式污染，但需规避动态类名未声明、穿透无容器等误用。
-
能，但须符合语义且仅用于东亚文字注音；需ruby+rt+rp结构，主流浏览器支持良好，IE≤10不支持；禁用于英文缩写等非注音场景。
-
label的for属性必须严格匹配input的id，否则点击文字无法聚焦；推荐用label包裹input免配置绑定；aria-labelledby仅服务辅助技术，不触发点击聚焦；排查时优先验证id是否存在且唯一。
-
最常见原因是name属性严格区分大小写：<slotname="Footer">仅匹配slot="Footer"，slot="footer"会被丢入默认插槽或忽略；该规则由HTML规范强制定义，所有浏览器均严格执行。
-
JavaScript有七种原始数据类型：string、number、bigint、boolean、null、undefined、symbol；它们按值传递、不可变、自动装箱，且除null外typeof返回准确小写类型名。
-
z-index失效主因是父容器创建了层叠上下文或子元素未设非static定位；需检查opacity、transform等触发属性及position值，并用DevTools验证stackingcontext。
-
关键CSS是提取首屏必需样式，排除媒体查询、伪类等；推荐critters（构建时）、penthouse（服务端）或cheerio（静态HTML），正则匹配不可靠。
-
关键在于状态与DOM严格同步：初始化用JSON.parse(localStorage.getItem('todos')||'[]')避免null报错，增删改后立即JSON.stringify存入localStorage；用data-id而非索引映射数据与DOM，checkbox通过.checked属性双向绑定，渲染时显式设置checked值，change事件中更新数据并持久化。
-
grid-template是CSSGrid布局的核心复合属性，它通过一行代码同时定义网格的行、列结构和命名区域。1.使用时需先设置容器为display:grid或inline-grid；2.它是grid-template-rows、grid-template-columns和grid-template-areas的简写形式；3.语法上，/前定义行结构与区域名称，/后定义列结构；4.支持fr单位实现弹性空间分配，minmax()函数设定轨道尺寸范围，从而提升响应式设计能力；5.可结合媒体查询实现不同屏幕尺寸
