Next Experience Framework: select a shadow DOM node in your actionHandlers

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"));
      }
   }
}

Comments

[Raga]

Hi Tom,

Thanks for your post, it was very helpful.
I have a following question, I struggle to use the CSS for CDN FontAwesome. After the component is rendered, it seems that the CSS are out of reach. Can you confirm ? I guess you were faced with the same issue with d3 that needs al lot of css to be prettified !