Method connectedCallback

core/src/components/input/input.tsx:407–450

()

  }

  connectedCallback() {
    const { el } = this;

    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
      this.setSlottedLabelId();
      forceUpdate(this);
    });

    this.setSlottedLabelId();
    this.notchController = createNotchController(
      el,
      () => this.notchSpacerEl,
      () => this.labelSlot
    );

    // Watch for class changes to update validation state
    if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
      this.validationObserver = new MutationObserver(() => {
        const newIsInvalid = checkInvalidState(el);
        if (this.isInvalid !== newIsInvalid) {
          this.isInvalid = newIsInvalid;
          // Force a re-render to update aria-describedby immediately
          forceUpdate(this);
        }
      });

      this.validationObserver.observe(el, {
        attributes: true,
        attributeFilter: ['class'],
      });
    }

    // Always set initial state
    this.isInvalid = checkInvalidState(el);

    this.debounceChanged();
    if (Build.isBrowser) {
      document.dispatchEvent(
        new CustomEvent('ionInputDidLoad', {
          detail: this.el,
        })
      );
    }
  }

  componentDidLoad() {
    this.originalIonInput = this.ionInput;