# 1. CustomElementRegistry.define 与 is: 属性的内置元素扩展工程价值 A 自定义元素标签名可以不带连字符 B 内置元素扩展必须用自主元素类实现 C 同一自定义元素名可以重复 define 不影响 D is: 扩展内置元素可保留原元素语义,但 Safari 不支持 ✓ 正确答案
# 2. slot 的分发机制(具名/默认插槽与 slotchange 事件)在自定义元素组合的工程实践 A 具名插槽按 name 匹配,未匹配的进入默认插槽 ✓ 正确答案 B 插槽内容会被真正移动到阴影树中 C slotchange 事件会冒泡到宿主元素 D 默认插槽只能接收一个子元素
# 3. Constructable Stylesheets 与 Form-associated 自定义元素的协作 A 一张 CSSStyleSheet 可被多个 shadowRoot 共享复用 ✓ 正确答案 B adoptedStyleSheets 只能用于 document,不能用于 shadowRoot C 构造样式表必须通过 <style> 标签注入 D 表单自定义元素无法使用 adoptedStyleSheets
# 4. Custom Elements 的 customState(:state())与状态查询 A 内部状态可通过 :state() 被外部样式引擎查询 ✓ 正确答案 B :state() 只能在 Shadow DOM 内部使用 C CustomStateSet 只能存储字符串,不能删除 D CustomState 与 data-* 属性完全相同
# 5. 自定义元素 constructor 的约束(super 先于 this、禁止读 attributes/children、不可抛错)对框架封装、SSR 与测试的影响 A constructor 中可以读取 attributes B super() 必须在本类 this 访问之前调用 ✓ 正确答案 C constructor 中抛错不会影响文档解析 D constructor 是读写属性的推荐位置
# 6. 表单关联自定义元素的 formResetCallback/formDisabledCallback/formStateRestoreCallback 在重置、禁用与状态恢复的应用 A formResetCallback 在元素被禁用时触发 B formDisabledCallback 在表单 reset 时触发 C 这些回调不需要 formAssociated 标志 D formStateRestoreCallback 用于恢复浏览器保存的状态 ✓ 正确答案
# 7. Autonomous Custom Elements 与 Customized Built-in Elements 的差异 A 定制内置元素通过 is: 属性在既有标签上使用 ✓ 正确答案 B 自主元素继承 HTMLButtonElement C 定制内置元素覆盖所有浏览器 D 自主元素默认自带 button 语义
# 8. 自定义元素的样式继承与 Shadow DOM 边界 A 外部标签选择器可以穿透进入影子内部 B 可继承 CSS 属性会跨 Shadow 边界传递 ✓ 正确答案 C :host 样式永远无法被外部覆盖 D 影子内部完全不受外部样式影响
# 9. CSS Parts(::part/::slotted)的样式定制接口在组件库主题与定制边界的工程价值 A ::slotted 用于选择插槽内的 light DOM 内容 ✓ 正确答案 B ::part 可以穿透内部任意层级元素 C ::part 与 CSS 变量作用完全相同 D part 属性无需组件显式声明即可定制
# 10. 自定义元素的生命周期,connectedCallback 等回调时机? A connectedCallback 可多次触发,应避免重复绑定副作用 ✓ 正确答案 B disconnectedCallback 在页面卸载时必然触发 C connectedCallback 只会触发一次 D attributeChangedCallback 在属性变化时不会触发
# 11. ElementInternals 的 setFormValue/formData API 的工程价值 A setFormValue 只影响显示,不影响提交 B formData 无法收集自定义控件值 C ElementInternals 通过 attachInternals 只能在原生 input 上使用 D setValidity 用于设置校验状态并配合 :invalid ✓ 正确答案
# 12. Custom Elements 的 upgrade 机制(已有元素实例的升级) A 已存在于 DOM 的元素无法被升级 B whenDefined 在元素定义前立即 resolve C customElements.upgrade 可强制升级子树内元素 ✓ 正确答案 D 升级不会调用 constructor
# 13. observedAttributes 与属性变更回调 A 声明后 attribute 会自动同步到 property B 属性反射无需手动实现 C observedAttributes 影响所有属性变化 D attributeChangedCallback 在 removeAttribute 时 newValue 为 null ✓ 正确答案
# 14. Shadow DOM 的封装边界(open/closed)与事件重定向(composed/composedPath)在自定义元素的应用 A closed 模式下 shadowRoot 一定可访问 B 事件重定向使 target 始终为内部节点 C composed: true 的事件可跨过 Shadow 边界冒泡 ✓ 正确答案 D composedPath 返回的是顶层路径
# 15. Lit Element / FAST Element 在轻量 Web Components 框架的工程取舍 A Lit 组件无法跨框架复用 B Lit 基于响应式属性与 template literal 模板 ✓ 正确答案 C FAST 是 Google 推出的框架 D Lit 不支持 CSS 模板标签
# 16. 自定义元素默认 display: inline 与 HTML 解析器对未知元素的处理(块级布局、自闭合差异)在模板复用时的陷阱 A 自定义元素默认 display: block B HTML 中 <my-el/> 会被当作完全自闭合 C 未知元素按 XML 规则解析 D 需在 :host 显式声明 display 才能改变默认 inline ✓ 正确答案
# 17. 自定义元素默认无角色与键盘焦点行为,role、tabindex 与焦点管理的手动补齐,及与原生控件语义的差距 A 自定义元素默认自带 button 角色 B 自定义元素默认在 tab 序中 C 自定义元素默认无 ARIA 角色,需手动设置 role ✓ 正确答案 D 自定义元素与原生控件语义完全一致
# 18. Custom Elements 经历了哪些关键版本演进,与 Lit、Fast、Shoelace 等框架/库相比各自适用什么场景 A Custom Elements v0 是当前标准 B Shoelace 是基于 Lit 的现成组件库 ✓ 正确答案 C Lit 适合零依赖原生场景 D Fast 是 Google 推出的框架
# 19. Custom Elements 与 design system(Material Web / Shoelace / Spectrum Web Components) A Material Web 基于 React 实现 B Web Components 组件只能在非框架环境使用 C Spectrum Web Components 是 Google 的 D Shoelace 不依赖任何框架即可使用 ✓ 正确答案
# 20. Shadow DOM 的样式隔离,与全局样式的边界? A 外部全局样式完全无法影响影子内部 B CSS 变量会沿继承链穿透 Shadow 边界 ✓ 正确答案 C 影子内部样式会泄漏到外部文档 D :host 无法被外部样式覆盖
# 21. 自定义元素命名必须含连字符与保留标签约束、重复 define 抛错的注册冲突治理 A 自定义元素标签名可以不含连字符 B 保留标签可作为自定义元素名 C 重复 define 同名元素会抛错 ✓ 正确答案 D 全局注册表允许同名覆盖