Repository navigation
feat(angular): add onElementConnected hook for universal elements - #4143
Merged
Merged
Conversation
josemontespg
force-pushed
the
angular-element-connected-hook
branch
from
November 10, 2026 21:35
17729e7 to
1569ef5
Compare
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces the A2UI_ELEMENT_CONNECTED_EVENT dispatched by A2uiLitElement upon connecting with a context or node, and adds an onElementConnected hook to AngularComponentImplementation so that Angular hosts can decorate universal elements. The review feedback highlights a critical bug where the connected event is missed if the context is assigned asynchronously after the element connects, recommending dispatching it during updates as well. Additionally, a potential TypeError was identified in ComponentHostComponent due to a missing guard on componentModel, and a test update was suggested to cover the asynchronous context assignment scenario.
8 tasks
josemontespg
force-pushed
the
angular-element-connected-hook
branch
2 times, most recently
from
November 11, 2026 21:57
373fba4 to
5f01440
Compare
josemontespg
force-pushed
the
angular-universal-google3-readiness
branch
from
November 11, 2026 22:02
d71fe00 to
abba9ea
Compare
josemontespg
force-pushed
the
angular-element-connected-hook
branch
from
November 11, 2026 22:05
5f01440 to
e701747
Compare
josemontespg
commented
Nov 11, 2026
josemontespg
commented
Nov 11, 2026
josemontespg
commented
Nov 11, 2026
josemontespg
force-pushed
the
angular-universal-google3-readiness
branch
from
November 13, 2026 18:32
abba9ea to
dc6790f
Compare
josemontespg
force-pushed
the
angular-element-connected-hook
branch
from
November 13, 2026 18:34
63fed77 to
90c5968
Compare
josemontespg
marked this pull request as ready for review
November 13, 2026 19:12
josemontespg
changed the base branch from
angular-universal-google3-readiness
to
main
November 13, 2026 19:26
josemontespg
force-pushed
the
angular-element-connected-hook
branch
from
November 13, 2026 19:27
90c5968 to
f44a72d
Compare
ditman
approved these changes
Nov 13, 2026
ditman
left a comment
ditman
left a comment
Collaborator
There was a problem hiding this comment.
LGTM! Clean design across @a2ui/web_core/universal and @a2ui/angular! Good use of WeakSet!
…s handled Use event.composedPath()[0] so elements inside shadow roots reach the hook, and replace stopPropagation() with a WeakSet marker so ancestor hosts skip handled events while other listeners still observe them.
Add dispatchA2uiElementConnected to web_core, an idempotent helper that dispatches A2UI_ELEMENT_CONNECTED_EVENT once per element when it is connected with a node or context. A2uiLitElement, renderA2uiNode and the Angular ComponentHostComponent call it, so onElementConnected runs for universal elements of any base class.
josemontespg
force-pushed
the
angular-element-connected-hook
branch
from
November 13, 2026 23:32
f44a72d to
74681cd
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This adds a hook so an app can decorate universal elements it does not own, for example to add analytics attributes, without subclassing them.
A catalog entry can set
onElementConnected(element, context, injector). When a universal element first connects with anodeorcontext, it dispatches a bubbling, composeda2ui-element-connectedevent once:A2uiLitElementdoes it itself, andrenderA2uiNodedoes it for the elements it creates, whatever their base class. The nearestComponentHostComponentcatches it, stops it from reaching outer hosts, and calls the entry's callback with its own injector. That covers root elements and the ones universal containers create.Changes
@a2ui/web_core: exportA2UI_ELEMENT_CONNECTED_EVENTand the idempotentdispatchA2uiElementConnectedhelper from the universal entry point.A2uiLitElementandrenderA2uiNodecall it, and custom containers that insert children by hand can too. The jsdom test setup exposes jsdom'sCustomEvent.@a2ui/angular: add the optionalonElementConnectedfield toAngularComponentImplementation, and forward the event to it fromComponentHostComponent, which also dispatches it for its own root element.src/catalog/types.tsjoins the boundary allowlist ineslint.boundary.mjs, because the callback receives aComponentContext. A signature that takes theComponentNodeinstead would avoid that; happy to switch if reviewers prefer it.Verification
yarn --cwd typescript/core/web_core testand the Angular karma suite (ng test lib), with the new specs confirmed in the karma output.yarn lintin both packages, the web_core and Angular builds, and./scripts/fix_format.sh --check.Part of #4148.