defineMethods

Copies methods, getters and setters onto the element, so outside code can call element.method().

defineMethods(methods: object): void
defineMethods({
  open() {
    panel.open = true;
  },
  close() {
    panel.open = false;
  },
  get isOpen() {
    return panel.open;
  },
});

Parameters

Parameter Type Meaning
methods object Every own property (including getters and setters) is defined on the element with the same descriptor, made configurable

The properties are removed when the element is removed. Call defineMethods after your functions and before lifecycle hooks.

Example

Previewindex.htmlstep-counter.html

Value:

Call steps.increment() 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>defineMethods demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>

  <import-element from="./step-counter.html"></import-element>

  <step-counter id="steps"></step-counter>
  <ui-button variant="outline" onclick="document.getElementById('steps').increment()">Call steps.increment()</ui-button>
</body>
</html>
<custom-element name="step-counter">
  <script>
    const counter = useState({ value: 0 });

    defineMethods({
      increment() {
        counter.value++;
      },
      get value() {
        return counter.value;
      },
    });
  </script>

  <p>Value: <slot name="#counter.value"></slot></p>
</custom-element>

Edit this page on GitHub · View as Markdown