Method connectedCallback

packages/element-image/src/index.ts:152–181

()

  }

  protected connectedCallback(): void {
    super.connectedCallback();

    const { $image } = this;
    const $canvas: CropperCanvas | null = this.closest(this.$getTagNameOf(CROPPER_CANVAS));

    if ($canvas) {
      this.$canvas = $canvas;
      this.$setStyles({
        // Make it a block element to avoid side effects (#1074).
        display: 'block',
        position: 'absolute',
      });

      this.$onCanvasActionStart = (event: Event | CustomEvent) => {
        this.$actionStartTarget = (event as CustomEvent).detail?.relatedEvent?.target;
      };
      this.$onCanvasActionEnd = () => {
        this.$actionStartTarget = null;
      };
      this.$onCanvasAction = this.$handleAction.bind(this);
      on($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
      on($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
      on($canvas, EVENT_ACTION, this.$onCanvasAction);
    }

    this.$onLoad = this.$handleLoad.bind(this);
    on($image, EVENT_LOAD, this.$onLoad);
    this.$getShadowRoot().appendChild($image);
  }

  protected disconnectedCallback(): void {
    const { $image, $canvas } = this;