DOMNode

To interact with the DOM node that's automatically generated for your component, Joystick provides the DOMNode value on the component instance. You can access this value from anywhere you have access to instance (e.g. lifecycle methods, event handlers, etc.).

import joystick from '@joystick.js/ui';

const Index = joystick.component({
  lifecycle: {
    on_mount: (instance = {}) => {
      const button = instance.DOMNode.querySelector('button');
      // Interact with the DOM node for the button in your component.
    },
  },
  render: () => {
    return `
      <div>
        <button>Click Me</button>
      </div>
    `;
  },
});

{% callout title="Use Extreme Caution" %} Extreme caution should be used when interacting with DOMNode, as changes to the DOM or its children can cause unexpected rendering bugs. Be certain of what you're doing before modifying it. {% /callout %}

API Reference

Definition

instance.DOMNode: HTMLElement;

Parameters

DOMNode HTMLElement required

A direct reference to the DOM node automatically generated by Joystick for the component. Accessible anywhere the component instance is available (e.g., lifecycle methods, event handlers).