The "method" meta tag defines a single method, to be exposed on the defined custom element.
Methods are always read-only; otherwise, use <meta property>. One <meta method=…> declaration always defines one method. To add multiple, use multiple declarations.
Note: If the purpose is to pass data to a component, using one or more properties is usually a more ergonomic choice. This is because it is not possible to call methods inside of a component's <template>, whereas there is a shorthand for .properties.
Syntax
<meta method="…">
Attributes
- method
- The name of the method. The implementation is looked up under the same name on the component's state variable
$.
Examples
Content-reverser
In this example, we'll be building a component that can reverse its text contents. For simplicity we'll assume it only ever contains text. For the reversing, we'll implement a .reverse() method on the component's state variable $, and declare it as exposed method using <meta method=…>.
<title>content-reverser</title>
<meta method="reverse">
<script>
$.reverse = () => {
const content = this.textContent;
const reversed = [...content].reverse().join('');
this.textContent = content;
};
</script>
Now, given a reference element to a certain <content-reverser> element, we can call element.reverse() to flip its text contents around. Note that we cannot reassign element.reverse (at least not from outside of the component definition).
Usage notes
While methods defined through <meta method> should always be functions, technically they are equivalent to defining a <meta property> with the readonly attribute. Also note that while they are readonly from the perspective of someone using the component, the component definition might alter the exposed function implementation. However, this is not advised, since authors might not expect a method to change over time.
There is no distinction between synchronous and asynchronous methods; the definition on $ is essentially forwarded as-is. If desired methods may be marked asynchronous in their declaration using <meta async method=…> in order to provide better first-glance documentation, however this does not have any functional effect. The async attribute is merely cosmetic, so synchronous functions do not get turned into asynchronous ones regardless of the attribute.
Methods are implicitly ignored with monitor.ignore(), so calling a component method cannot contribute to monitored contexts such as effect() or connected(). This is because Yozo is designed to be drop-in, while remaining understandable to use; authors using components should not have to know anything about live variables or monitored contexts if they are not directly using Yozo themselves.
See also