I had the task to write a component where I render a d3js graph. D3.js is a JavaScript library to manipulate documents based on data you provide.

So my goal was, to create the hole graph when the component is rendered. For that we can use some component lifecycle actions. I used the 'COMPONENT_DOM_READY' to achieve my goal.

First we need to import the action type like:

import {createCustomElement, actionTypes} from '@servicenow/ui-core';
const { COMPONENT_DOM_READY } = actionTypes;

Then we can go to our createCustomElement function and add the actionHandlers. We can now create the action handler for the COMPONENT_DOM_READY lifecycle action and with the effects we are also getting the host object.

Let's imagine I have a tag in my view and now I can use the d3.select and the host.shadowRoot.querySelector("svg") to get the right shadow DOM node to do my d3js magic.

actionHandlers: {
    [COMPONENT_DOM_READY]: {
        effect({ state, host }) {
                   const svg = d3.select(host.shadowRoot.querySelector("svg"));
      }
   }
}