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]

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]

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
    this.text = 'Called Within!'; //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