自定义元素

共 21 题
#

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 全局注册表允许同名覆盖