This recipe demonstrates a technique of extracting custom properties on-demand from DOM elements via the Dojo 2 API.


  1. Create a meta/getStyle.ts file:
import MetaBase from '@dojo/widget-core/meta/Base';

class getStyle extends MetaBase {
  get(key: string, style: string) {
    const node = this.getNode(key);

    if (node) {
      const computedStyle = window.getComputedStyle(node);
      return computedStyle[style];

export default getStyle

The getStyle function does the following:

  • Extends from '@dojo/widget-core/meta/Base' which provides access to DOM node utility functions
    • Tip: ‘meta’ is a Dojo 2 term which refers to accessing additional information about a widget which is typically only available through the rendered DOM element
  • Retrieves a DOM node based on the passed in key
  • Extracts the computed style of the selected DOM node
  1. First import the getStyle function:
import getStyle from '../meta/getStyle';
  1. To use the getStyle function from a widget, use the meta method:
render() {
  const style = this.meta(getStyle).get('node', 'color');
  console.log(`The color is: ${style}`);

  return v('div', {
    key: 'node'
  }, ['Hello']);

Observe: The color is: rgb(0, 0, 0) is logged to the DevTools console.

Additional resources

See the Dojo 2 Meta Configuration documentation for more information