Function createCustomElement

packages/elements/src/create-custom-element.ts:132–255

(
  component: Type<any>,
  config: NgElementConfig,
)

 * @publicApi
 */
export function createCustomElement<P>(
  component: Type<any>,
  config: NgElementConfig,
): NgElementConstructor<P> {
  const inputs = getComponentInputs(component, config.injector);

  const strategyFactory =
    config.strategyFactory || new ComponentNgElementStrategyFactory(component);

  const attributeToPropertyInputs = getDefaultAttributeToPropertyInputs(inputs);

  class NgElementImpl extends NgElement {
    // Work around a bug in closure typed optimizations(b/79557487) where it is not honoring static
    // field externs. So using quoted access to explicitly prevent renaming.
    static readonly ['observedAttributes'] = Object.keys(attributeToPropertyInputs);

    protected override get ngElementStrategy(): NgElementStrategy {
      // TODO(andrewseguin): Add e2e tests that cover cases where the constructor isn't called. For
      // now this is tested using a Google internal test suite.
      if (!this._ngElementStrategy) {
        const strategy = (this._ngElementStrategy = strategyFactory.create(
          this.injector || config.injector,
        ));

        // Re-apply pre-existing input values (set as properties on the element) through the
        // strategy.
        // TODO(alxhub): why are we doing this? this makes no sense.
        inputs.forEach(({propName, transform}) => {
          if (!this.hasOwnProperty(propName)) {
            // No pre-existing value for `propName`.
            return;
          }

          // Delete the property from the DOM node and re-apply it through the strategy.
          const value = (this as any)[propName];
          delete (this as any)[propName];
          strategy.setInputValue(propName, value, transform);
        });
      }

      return this._ngElementStrategy!;
    }

    private _ngElementStrategy?: NgElementStrategy;

    constructor(private readonly injector?: Injector) {
      super();
    }

    override attributeChangedCallback(
      attrName: string,
      oldValue: string | null,
      newValue: string,
      namespace?: string,
    ): void {
      const [propName, transform] = attributeToPropertyInputs[attrName]!;
      this.ngElementStrategy.setInputValue(propName, newValue, transform);
    }