Web Components

Understands the Web Components concept and its relation to Angular Elements. Uses third-party Web Components in Angular templates via CUSTOM_ELEMENTS_SCHEMA in component metadata.

Understands Web Components standards (Custom Elements, Shadow DOM). Integrates third-party web components into React applications. Knows when to use native components vs React abstractions.

Understands Web Components and their interoperability with Svelte. Compiles Svelte components as custom elements for cross-framework reuse. Works with Shadow DOM and slot-based composition.

Creates Angular Elements for use outside Angular: packaging standalone components as Custom Elements, data passing via attributes/properties, event handling via CustomEvent.

Creates React wrappers for Web Components with correct TypeScript typing: property mapping, event forwarding, ref support. Implements bidirectional integration between React components and Custom Elements for use in other frameworks.

Creates Svelte components exported as Web Components through customElement: true, configures shadow DOM and property forwarding. Integrates third-party Web Component UI libraries in SvelteKit, ensures correct SSR hydration.

Designs Angular Elements architecture for cross-framework integration: Shadow DOM strategies, lazy-loading Angular Elements, bundle size optimization for widgets, styling via CSS Parts.

Designs Web Components usage strategy in the React ecosystem: shared UI primitives as Custom Elements for framework-agnostic design system, Shadow DOM for encapsulation in micro-frontend architecture. Ensures SSR compatibility through Declarative Shadow DOM.

Designs micro-frontend architecture with Svelte Web Components: style isolation, communication through CustomEvent, shared state. Creates a framework-agnostic component library on Svelte, ensures compatibility with React/Vue/Angular consumers.

Manages Web Components strategy in the Angular project: standards for creating Angular Elements for micro-frontends, versioning and npm publishing, integration with non-Angular applications.

Defines Web Components strategy for the React team: when to use WC vs React components, standards for creating framework-agnostic components. Coordinates creation of a shared Custom Elements library for cross-framework usage.

Defines Web Components strategy for the organization: when to use Svelte custom elements vs native, interaction standards. Coordinates shared component library creation, ensures documentation and testing for multi-framework consumers.

Defines micro-frontend architecture through Angular Elements and Web Components: federated modules, shared dependencies strategy, Module Federation and Native Federation integration.

Shapes Web Components architectural strategy for the organization: standards-based UI primitives, portability strategy between React and other frameworks, design system integration. Defines long-term direction: React-specific vs Web Standards.

Shapes UI reuse architectural strategy at the organizational level through Web Components and Svelte. Researches Declarative Shadow DOM and HTML Modules prospects for SvelteKit SSR, influences custom element support in the Svelte compiler.