前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载SlottedBehaviorOptions是 Microsoft FAST Element 中用于配置slotted 节点观察即监听slot元素assignedNodes()变化的核心选项接口。本文围绕该接口的完整签名、继承来源、源码实现与实战用法展开帮助你在自定义元素模板中精准收集和响应插槽分配节点并能读懂仓库中与之对应的slotted()指令与SlottedBehavior运行机制。接口概览一次接口三个来源在 1.x 版本 API 文档中该接口的定义如下见 fast-element.slottedbehavioroptions.mdexport interface SlottedBehaviorOptionsT any extends NodeBehaviorOptionsT, AssignedNodesOptions接口描述为The options used to configure slotted node observation——即配置 slotted 节点观察所用的选项集合。它不定义任何自有成员而是通过多重继承组合了两个来源的配置能力NodeBehaviorOptionsTfast-element 自身的节点观察通用选项提供目标属性名与过滤函数AssignedNodesOptions来自 TypeScript DOM 标准库lib.dom.d.ts的类型对应浏览器原生HTMLSlotElement.assignedNodes()的调用参数即{ flatten?: boolean }。需要留意的是在 当前仓库 的源码中该接口已演进命名为SlottedDirectiveOptionsT extends NodeBehaviorOptionsT, AssignedNodesOptions见 api-report.api.md 第 991 行语义与 1.x 文档中的SlottedBehaviorOptions完全一致。这份文档页面本身由 API Documenter 自动生成属于 API 参考页因此结合源码阅读最能还原其真实行为。继承之一NodeBehaviorOptions —— 目标属性与过滤NodeBehaviorOptionsT定义于 node-observation.ts是children与slotted两类节点观察指令共享的基接口包含两个成员成员类型说明propertyT观察到的节点要赋值到源对象上的属性名filter?ElementsFilter节点过滤函数对数组中的每个元素各调用一次仅通过过滤的节点会同步到属性其中ElementsFilter的类型签名是export type ElementsFilter (value: Node, index?: number, array?: Node[]) boolean;fast-element 还内置了一个elements(selector?)工厂函数node-observation.ts用于生成只保留元素节点的过滤器不传参数时仅检查nodeType 1即 ELEMENT_NODE传入 CSS 选择器时还会额外调用element.matches(selector)做精配过滤。继承之二AssignedNodesOptions —— flatten 透传AssignedNodesOptions并非 fast-element 自定义类型而是 TypeScript DOM 库为原生HTMLSlotElement.assignedNodes(options?)定义的标准参数类型其唯一可选成员是flatten?: booleanflatten: false默认仅返回直接分配给该插槽的节点flatten: true返回该插槽在影子树中展开后的完整分配节点集包括嵌套插槽分配过来的节点。从 slotted.ts 的实现可以看到该选项会被原样透传给浏览器原生 APIgetNodes(target: HTMLSlotElement): Node[] { return target.assignedNodes(this.options); }也就是说你在SlottedBehaviorOptions中配置的flatten值会直接作用于assignedNodes()的调用最终返回结果再经过filter处理后才写入目标属性。源码实现从 option 到行为的完整链路理解了接口成员后再看它如何被消费。1.x 文档中的SlottedBehavior类见 fast-element.slottedbehavior.md签名如下export declare class SlottedBehavior extends NodeObservationBehaviorSlottedBehaviorOptions其构造函数接收(target: HTMLSlotElement, options: SlottedBehaviorOptions)并实现了三个方法observe()、disconnect()、getNodes()。在当前源码中对应SlottedDirectiveslotted.ts关键行为包括监听slotchange事件observe(target)通过target.addEventListener(slotchange, this)开始观察disconnect(target)移除监听对应文档页中的 observe/disconnect 方法。每当插槽分配节点变化时触发回调更新目标属性handleEvent中调用updateTarget(this.getSource(target), this.computeNodes(target))把最新节点写入源对象的property属性应用 filtercomputeNodes在基类 node-observation.ts 中实现——先取原生assignedNodes()结果若 options 中存在filter则执行nodes.filter(this.options.filter)过滤发生在节点赋值之前解绑清理unbind时先将空数组写入属性再移除事件监听避免内存泄漏。实战用法一字符串简写与 options 对象slotted()指令是使用该选项接口的入口。其 1.x 签名fast-element.slotted.md为export declare function slottedT any(propertyOrOptions: (keyof T string) | SlottedBehaviorOptionskeyof T string): CaptureTypeT;即参数既可以是一个属性名字符串也可以是完整的SlottedBehaviorOptions对象。当传入字符串时源码 slotted.ts 会将其转换为{ property: propertyOrOptions }简写形式。最简单的用法——直接传入属性名示例取自 using-directives.mdimport { FASTElement, customElement, html, slotted } from microsoft/fast-element; const template htmlMyElement div slot ${slotted(slottedNodes)}/slot /div ; customElement({ name: my-element, template }) export class MyElement extends FASTElement { observable slottedNodes: Node[]; slottedNodesChanged() { // 响应插槽节点变化 } }要点说明slottedNodes会被填充为该插槽分配的所有节点若用observable修饰则节点变化时会动态更新可以同时实现*Changed变更回调如slottedNodesChanged以响应节点变化官方指南明确建议优先依赖变更处理器来读取插槽节点而不是假定节点在connectedCallback中已存在详见 using-directives.md。实战用法二完整配置 —— filter 与 flatten 的组合当需要自定义行为时改为传入完整的 options 对象把NodeBehaviorOptions与AssignedNodesOptions的能力组合起来。例如只想收集被分配的foo-bar元素节点import { html, slotted, elements } from microsoft/fast-element; const template htmlMyElement div slot ${slotted({ property: slottedNodes, filter: elements(foo-bar), flatten: false })}/slot /div ;配置含义拆解property必需项指定写入节点数组的属性名filter: elements(foo-bar)只保留匹配foo-bar的元素节点其余文本节点、注释节点与不匹配元素被剔除flatten: false仅取直接分配给该 slot 的节点不展开嵌套插槽。更细粒度地filter也可以是任意自定义的ElementsFilter函数例如只保留偶数下标元素filter: (node, index) index % 2 0。该函数会对每个节点各执行一次接收value、index、array三个参数。测试验证仓库中的行为证据接口的每一个行为都能在 Playwright 测试 slotted.pw.spec.ts 中找到对应验证节点收集第 41-103 行在宿主上追加 10 个子节点后构造new SlottedDirective({ property: nodes })并bind断言model.nodes与子节点数组逐项相等filter 过滤第 105-173 行以{ property: nodes, filter: elements(foo-bar) }配置后断言仅收集到匹配foo-bar的子集与children.filter(elements(foo-bar))结果一致动态更新第 175-240 行bind 之后向宿主追加新的子节点等待Updates.next()fast-element 的批量更新队列断言model.nodes同步增长到最新数量。这些用例印证了该选项接口收集 → 过滤 → 动态同步的完整语义property决定写往哪里filter决定写入什么flatten决定原生层取到哪些节点而slotchange事件驱动了持续更新。与 children 指令的对照小结SlottedBehaviorOptions与children指令共享NodeBehaviorOptions基类两者的核心差异在于观察对象与原生调用slotted观察slot元素的分配节点底层调用HTMLSlotElement.assignedNodes(options)因此支持flatten透传children观察元素子节点light DOM / shadow DOM 内的直接子节点使用MutationObserver一类机制不支持flatten。选择哪个取决于你的组件需要跟踪插槽分配还是直接子节点。官方文档还指出若在children中使用subtree选项则必须用selector形式的 filter参见 using-directives.md而slotted始终可以自由组合filter与flatten。相关参考接口参考页fast-element.slottedbehavioroptions.md、fast-element.nodebehavioroptions.md行为类与指令fast-element.slottedbehavior.md、fast-element.slotted.md源码实现slotted.ts、node-observation.ts使用指南using-directives.md含slotted指令完整示例与最佳实践测试用例slotted.pw.spec.ts赞分享前端UI组件【免费下载链接】fastThe adaptive interface system for modern web experiences.项目地址https://gitcode.com/gh_mirrors/fa/fast点击查看免费下载相关推荐Fast-Element children() 指令详解在 FASTElement 中观察与同步子节点Fast Element children 指令详解在 FASTElement 中观察与同步子节点 children 是 microsoft/fast el前端UI组件深入解析 fast-element 的 SlottedBehavior.getNodes() 方法与槽节点观察机制深入解析 fast element 的 SlottedBehavior.getNodes 方法与槽节点观察机制 SlottedBehavior 是 Micros前端UI组件FAST 子节点观察运行时microsoft/fast-element 中 ChildrenBehavior 的完整解析FAST 子节点观察运行时microsoft/fast element 中 ChildrenBehavior 的完整解析 本文基于仓库中 fast elem前端UI组件上一篇3分钟学会无损视频剪辑告别重新编码的漫长等待下一篇怎样3步解锁VMware对macOS的支持完整安装指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考