Update methods.md

[msqaddura]

it seems what we want to say is that; it is callable from outside, not directly from the element (component). though they can be called directly but the following sentence "i.e. they are intended to be callable from the outside!" states otherwise

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
stencil-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 17, 2024 11:38am

[christian-bromann]

@msqaddura mhm 🤔 I am not sure if this makes sense, do you have a concrete example?

[msqaddura]

@christian-bromann maybe first let me explain myself. to be sure i understand it correctly

1. so the point of @Method decorator is to give access to components, from another component. and that is when we use document.querySelector. is that right?

2. a component doesnt need @Method to access its own functions, we can use private func... or public func...

3. the statement below might be misleading given the example is not related to the statement first part says it can be called from within, the i.e given states that it is called from outside

decorator can be called directly from the element, i.e. they are intended to be callable from the outside!

https://stackblitz.com/edit/stencil-demo-itm9py?file=src%2Fwith-method.tsx,src%2Findex.html

import { h, Component, Host, State, Method } from '@stencil/core';

@Component({
  tag: 'with-method',
  shadow: true,
})
export class WithMethod {
  @State() text = '';
  @State() counter = 0;

  @Method() // Method is needed to expose the function
  async setTextFromOutside(text: string) {
    this.text = text;
  }

  // same functionality can be achieved without @Method
  private setTextWithin(text: string) {
    this.text = text;
  }
  onClick() {
    this.counter += 1;
    this.setTextWithin('Called Within!'); // this call can be private, doesnt need @Method
    this.text = 'Called Within!'; //however, we can access name from here, no need for setText
  }

  render() {
    return (
      <Host>
        <button onClick={() => this.onClick()}>Click me</button>
      </Host>
    );
  }
}

@Component({
  tag: 'method-caller',
  shadow: true,
})
export class MethodCaller {
  onClick() {
    const target = document.querySelector('with-method')!;

    target.setTextFromOutside('Called Outside!');
    // target.setTextWithin("Error"); //this is not going to work as it is not exposed via @Method()
  }
  render() {
    return (
      <Host>
        <button onClick={() => this.onClick()}>Click me</button>
      </Host>
    );
  }
}

Overall, maybe it is not that important but would be good to explain the intent of the @Method that it is meant to be called from outside the component

[msqaddura]

@christian-bromann maybe as well let me ask about the use-case for @Method if my understanding is correct, it is meant to be used when we want to do something inside a component using javascript (by using document.querySelector).

however, i might have limited it to updating properties/state from outside. and there might be another use-case for it.

so maybe it is more about me misunderstanding the motive behind @Method :D

[christian-bromann]

Functions decorated with @Method are suppose to be public functions that you can call via e.g.:

(async () => {
  await customElements.whenDefined('todo-list');
  const todoListElement = document.querySelector('todo-list');
  await todoListElement.showPrompt();
})();

Now you change says:

Functions decorated with the @Method() decorator should not be called directly from the element

Why should it not be called from the element? You should also be able to call this.showPrompt()