How to use the @material/mwc-base/form-element.query function in @material/mwc-base

class="mdc-checkbox__native-control"
              id="checkbox-1" @change="${this._changeHandler}" .indeterminate="${this.indeterminate}">
        <div class="mdc-checkbox__background">
          <svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
            <path d="M1.73,12.91 8.1,19.28 22.79,4.59" fill="none" class="mdc-checkbox__checkmark-path"></path>
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        </div>
      `;
    }
};
__decorate([
    query('.mdc-checkbox')
], Checkbox.prototype, "mdcRoot", void 0);
__decorate([
    query('input')
], Checkbox.prototype, "formElement", void 0);
__decorate([
    property({ type: Boolean }),
    observer(function (value) {
        this.mdcFoundation.setChecked(value);
    })
], Checkbox.prototype, "checked", void 0);
__decorate([
    property({ type: Boolean })
], Checkbox.prototype, "indeterminate", void 0);
__decorate([
    property({ type: Boolean }),
    observer(function (value) {

<svg viewBox="0 0 24 24" class="mdc-checkbox__checkmark">
            <path d="M1.73,12.91 8.1,19.28 22.79,4.59" fill="none" class="mdc-checkbox__checkmark-path"></path>
          </svg>
          <div class="mdc-checkbox__mixedmark"></div>
        
      `;
    }
};
__decorate([
    query('.mdc-checkbox')
], Checkbox.prototype, "mdcRoot", void 0);
__decorate([
    query('input')
], Checkbox.prototype, "formElement", void 0);
__decorate([
    property({ type: Boolean }),
    observer(function (value) {
        this.mdcFoundation.setChecked(value);
    })
], Checkbox.prototype, "checked", void 0);
__decorate([
    property({ type: Boolean })
], Checkbox.prototype, "indeterminate", void 0);
__decorate([
    property({ type: Boolean }),
    observer(function (value) {
        this.mdcFoundation.setDisabled(value);
    })
], Checkbox.prototype, "disabled", void 0);